javascript - Close modal when clicking outside of it - Stack Overflow

admin管理员组

文章数量:1357377

I was able to make my modal close when clicking on the x icon and when pressing the escape button. How can I also make it close when clicking outside the modal (i.e. the page's body?) Thanks

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);
});

I was able to make my modal close when clicking on the x icon and when pressing the escape button. How can I also make it close when clicking outside the modal (i.e. the page's body?) Thanks

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);
});

• javascript
• simplemodal

Share Improve this question Follow asked Aug 18, 2020 at 23:20 user11206142user11206142

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

Here's what I ended up doing. Thanks!

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);
});

I like this solution, that I probably found here on Stackoverflow:

// Close modal on outside click

const modal = document.querySelector('.modal')

document.addEventListener('click', (e) => {
  let clickInside = modal.contains(e.target)

  if (!clickInside) {
     modal.classList.remove('show')
  }
})

You could do the following

document.addEventListener('click', function(e) {
  if (e.target.closest(trigger.dataset.modal) == null) {
    close();
  }
})

This will query the closest() method on whatever item was clicked. Closest() traverses UP the dom from where it starts. So if you click outside of the modal, it would return a null value. If you click an item within the modal, it will return the modal itself. You should be able to assume that if the returned value is null, that the click came from outside of the modal.

Additional Info about closest()

https://developer.mozilla/en-US/docs/Web/API/Element/closest

Try changing the style directly with the event listener.

window.onclick = (e) => {
    if (e.target == modal) {
        modal.style.display = "none";
    }        
}

本文标签： javascriptClose modal when clicking outside of itStack Overflow