Untitled
unknown
plain_text
12 days ago
3.6 kB
3
Indexable
Never
<script> document.addEventListener('DOMContentLoaded', function() { // Function to create and append the button to the body function createButton() { // Check if the button already exists if (document.getElementById('button_64')) { console.log('Button already exists.'); return; } // Create button HTML var buttonHTML = ` <button id="button_64" class="btn btn-primary">Open Modal</button> `; // Append button HTML to the body document.body.insertAdjacentHTML('beforeend', buttonHTML); console.log('Button HTML appended to body.'); } // 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">×</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.'); // Populate the modal with content from the hidden div populateModal(); } // Function to populate the modal with content from the hidden div 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 and append the button and modal on page load createButton(); createModal(); // Add click event listener to the button var button = document.getElementById('button_64'); if (button) { button.addEventListener('click', function() { showModal(); // Show the modal when the button is clicked console.log('Button clicked to show modal.'); }); } }); </script>
Leave a Comment