Untitled

document.addEventListener('DOMContentLoaded', function() {
    // Function to create and append the modal HTML
    function createModal() {
        // Check if the modal already exists
        if (document.getElementById('dynamicModal')) {
            console.log('Modal already exists.');
            return;
        }

        // Create modal HTML
        var modalHTML = `
            <div id="dynamicModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="modalLabel">Modal Title</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <!-- Content from hidden div will be cloned here -->
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        `;

        // Append modal HTML to the body
        document.body.insertAdjacentHTML('beforeend', modalHTML);
        console.log('Modal HTML appended to body.');
    }

    // Function to clone content from hidden div into the modal
    function populateModal() {
        var hiddenDiv = document.getElementById('hiddenDiv');
        var modalBody = document.querySelector('#dynamicModal .modal-body');

        if (hiddenDiv && modalBody) {
            // Clone content from hidden div
            modalBody.innerHTML = hiddenDiv.innerHTML;
            console.log('Modal populated with hidden div content.');
        } else {
            console.log('Hidden div or modal body not found.');
        }
    }

    // Function to show the modal
    function showModal() {
        var modalElement = document.getElementById('dynamicModal');
        if (modalElement) {
            var modal = new bootstrap.Modal(modalElement);
            modal.show();
            console.log('Modal is now visible.');
        }
    }

    // Create, populate, and show the modal on page load
    createModal();
    populateModal();
    showModal();
});