javascript - 单击外部时关闭模式

Question

单击 x 图标和按下退出按钮时，我能够关闭我的模式。在模式之外（即页面的正文？）单击时，我怎样才能使其关闭？谢谢

document.querySelectorAll(".modal-trigger").forEach((trigger) => {
    const modal = document.querySelector(trigger.dataset.modal);
    const closeBtn = modal.querySelector(".modal-close");
    function open() {
        modal.classList.add("show-modal");
        trigger.blur();
        document.body.style.overflow = "hidden";
        document.body.addEventListener("keydown", escapeClose);
    }
    function close() {
        modal.classList.remove("show-modal");
        document.body.style.overflow = "auto";
        document.body.removeEventListener("keydown", escapeClose);
    }
    function escapeClose(event) {
        if (event.keyCode === 27) {
            close();
        }
    }
    trigger.addEventListener("click", open);
    closeBtn.addEventListener("click", close);
});

标签： javascriptsimplemodal

Answer 1

这就是我最终做的事情。谢谢！

document.querySelectorAll(".modal-trigger").forEach((trigger) => {
    const modal = document.querySelector(trigger.dataset.modal);
    const closeBtn = modal.querySelector(".modal-close");
    function open(event) {
        modal.classList.add("show-modal");
        trigger.blur();
        document.body.style.overflow = "hidden";
        document.body.addEventListener("keydown", escapeClose);
        modal.addEventListener("click", outsideClose);
        event.stopPropagation();
    }
    function close() {
        modal.classList.remove("show-modal");
        document.body.style.overflow = "auto";
        document.body.removeEventListener("keydown", escapeClose);
        modal.removeEventListener("click", outsideClose);
    }
    function escapeClose(event) {
        if (event.keyCode === 27) {
            close();
        }
    }

    function outsideClose(event) {
        if (
            event.target === modal ||
            event.target.classList.contains("close-modal")
        ) {
            close();
        }
    }

    trigger.addEventListener("click", open);
    closeBtn.addEventListener("click", close);
});