/*
Adds a general solution for displaying content in a modal.
Designate a modal trigger by adding the 'data-modal-block' attribute
to any element. The child element with 'data-modal-open' will trigger
the modal and 'data-modal-content' will be used to populate the modal.
*/
let modal = document.createElement("div");
modal.id = "blockModalContainer";
modal.classList.add("modal");
let modalContainer = document.createElement("div");
modalContainer.classList.add("modal-container");
modal.appendChild(modalContainer);
let modalContent = document.createElement("div");
modalContent.classList.add("modal-content");
modalContainer.appendChild(modalContent);
let modalClose = document.createElement("button");
modalClose.innerHTML = "×";
modalClose.classList.add("modal-close");
modalContainer.appendChild(modalClose);
document.body.appendChild(modal);
{
/*
*/
}
// When the user clicks the button, open the modal
document.querySelectorAll("[data-modal-block]").forEach((item) => {
const trigger = item.querySelector("[data-modal-open]");
trigger.addEventListener("click", (event) => {
event.preventDefault();
// allow keyboard input to toggle modal
if (modal.getAttribute("aria-expanded") != "true") {
let contents = item.querySelector("[data-modal-content]").cloneNode(true);
contents.removeAttribute("data-modal-content");
modalContent.replaceChildren(contents);
showModal();
} else {
hideModal();
}
});
});
// When the user clicks on (x), close the modal
modalClose.addEventListener("click", (event) => {
hideModal();
});
// Close the modal if the user clicks outside of the content area
modal.addEventListener("click", (event) => {
if (event.target == modal) {
hideModal();
}
});
// Close the modal if the user presses escape
document.addEventListener("keydown", function (event) {
if (event.key === "Escape") {
hideModal();
}
});
showModal = function () {
modal.setAttribute("aria-hidden", false);
modal.setAttribute("aria-expanded", true);
};
hideModal = function () {
modal.setAttribute("aria-hidden", true);
modal.setAttribute("aria-expanded", false);
};
toggleModal = function () {
if (modal.getAttribute("aria-expanded") === "true") {
hideModal(modal);
} else {
showModal(modal);
}
};