My modal window setup allows for opening two separate modals one after another, with the capability to close them individually (closing the second modal while keeping the first one active).
(All the necessary code snippets are included below)
let open_modals = [];
$(function () {
// Get the button that opens the modal
var btn = document.querySelectorAll(".modal-button");
// All page modals
var modals = document.querySelectorAll('.modal');
// Get the <span> element that closes the modal
var spans = document.getElementsByClassName("close");
// Opening the modals on button click
for (var i = 0; i < btn.length; i++) {
btn[i].onclick = function (e) {
e.preventDefault();
modal = document.querySelector(e.target.getAttribute("href"));
modal.style.display = "block";
open_modals.push(modal.id);
}
}
// Closing the modals by clicking on the close button
for (var i = 0; i < spans.length; i++) {
spans[i].onclick = function () {
for (var index in modals) {
if (typeof modals[index].style !== 'undefined' && modals[index].id == open_modals[open_modals.length - 1]) {
modals[index].style.display = "none";
open_modals.pop();
setTimeout(function () {
for (var index in modals) {
modals[index].classList.remove("modal-content-active");
modal.style.display = "none";
open_modals.pop();
}
}, 400);
}
}
}
}
// Closing the modal by clicking anywhere outside it
window.onclick = function (event) {
if (event.target.classList.contains('modal')) {
for (var index in modals) {
if (typeof modals[index].style !== 'undefined' && modals[index].id == open_modals[open_modals.length - 1]) {
modals[index].style.display = "none";
open_modals.pop();
setTimeout(function () {
for (var index in modals) {
modals[index].classList.remove("modal-content-active");
modal.style.display = "none";
open_modals.pop();
}
}, 400);
}
}
}
}
})
Insert custom CSS here...
Add external script tag and html structure for modal windows here...When attempting to close my modal window, I encountered an error message as mentioned in the title. Removing specific lines from the JavaScript code resolved the issue temporarily, but those lines are essential for animation purposes.
If anyone has any suggestions for fixing this problem without skipping the animation feature, please let me know. Thank you!