You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
46 lines
1.2 KiB
46 lines
1.2 KiB
// Functions to open and close a modal
|
|
function openModal($el) {
|
|
$el.classList.add("is-active")
|
|
}
|
|
|
|
function closeModal($el) {
|
|
$el.classList.remove("is-active")
|
|
}
|
|
|
|
function closeAllModals() {
|
|
;(document.querySelectorAll(".modal") || []).forEach($modal => {
|
|
closeModal($modal)
|
|
})
|
|
}
|
|
|
|
// Add a click event on buttons to open a specific modal
|
|
;(document.querySelectorAll(".js-modal-trigger") || []).forEach($trigger => {
|
|
const modal = $trigger.dataset.target
|
|
const $target = document.getElementById(modal)
|
|
|
|
$trigger.addEventListener("click", () => {
|
|
openModal($target)
|
|
})
|
|
})
|
|
|
|
// Add a click event on various child elements to close the parent modal
|
|
;(
|
|
document.querySelectorAll(".modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button") ||
|
|
[]
|
|
).forEach($close => {
|
|
const $target = $close.closest(".modal")
|
|
|
|
$close.addEventListener("click", () => {
|
|
closeModal($target)
|
|
})
|
|
})
|
|
|
|
// Add a keyboard event to close all modals
|
|
document.addEventListener("keydown", event => {
|
|
const e = event || window.event
|
|
|
|
if (e.keyCode === 27) {
|
|
// Escape key
|
|
closeAllModals()
|
|
}
|
|
})
|
|
|