const textModal = document.querySelectorAll(".text-trig"); textModal.forEach(textLinkModal); function textLinkModal(trigger) { // eslint-disable-next-line no-undef const modal = document.querySelector(".check-footer__modal"); // eslint-disable-next-line no-undef const closeBtn = document.querySelector(".check-footer__content .close"); if (!modal || !closeBtn) return; // add open on click trigger.addEventListener("click", function () { const isOpen = modal.classList.contains("open"); if (!isOpen) { modal.classList.add("open"); } }); // remove open on click closeBtn.addEventListener("click", function () { modal.classList.remove("open"); }); // remove open if the click occurs on the modal and that click has a class of open // this stops the modal from disappearing if the user clicks on the content of the modal modal.addEventListener("click", function (e) { const el = e.currentTarget; if (e.target === modal && el.classList.contains("open")) { el.classList.remove("open"); } }); }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter