MediaWiki:Script/Modal.js : Différence entre versions
Ligne 1 : | Ligne 1 : | ||
− | |||
− | |||
function createModalInteraction(content) { | function createModalInteraction(content) { | ||
const boutonModal = content.querySelector(".button"); | const boutonModal = content.querySelector(".button"); | ||
Ligne 26 : | Ligne 24 : | ||
boutonModal.addEventListener("click", openModal); | boutonModal.addEventListener("click", openModal); | ||
boutonClose.addEventListener("click", closeModal); | boutonClose.addEventListener("click", closeModal); | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
(() => { | (() => { | ||
const modalContainers = document.querySelectorAll("div#mw-content-text div.modalContainer"); | const modalContainers = document.querySelectorAll("div#mw-content-text div.modalContainer"); | ||
− | |||
− | |||
modalContainers.forEach(createModalInteraction); | modalContainers.forEach(createModalInteraction); | ||
− | |||
− | |||
− | |||
− | |||
})(); | })(); |
Version du 29 novembre 2024 à 08:01
function createModalInteraction(content) {
const boutonModal = content.querySelector(".button");
const modalContent = content.querySelector(".modal");
const boutonClose = content.querySelector(".close");
const openModal = () => {
boutonModal.classList.add("tabber-active");
modalContent.classList.add("gen-active");
window.addEventListener("click", handleClickOutside);
};
const closeModal = () => {
boutonModal.classList.remove("tabber-active");
modalContent.classList.remove("gen-active");
window.removeEventListener("click", handleClickOutside);
};
const handleClickOutside = (event) => {
if (event.target === modalContent) {
closeModal();
}
};
boutonModal.addEventListener("click", openModal);
boutonClose.addEventListener("click", closeModal);
}
(() => {
const modalContainers = document.querySelectorAll("div#mw-content-text div.modalContainer");
modalContainers.forEach(createModalInteraction);
})();