当用户在模态外单击时，Javascript 关闭模态

Question

我有这个简单的代码

  const readmore = document.getElementById("read");
  const modaloverlay = document.getElementById("modaloverlay");
  const closeButton = document.querySelector(".closebutton");

  readmore.addEventListener("click", function () {
    modaloverlay.classList.add("overlayshows");
  });

    closeButton.addEventListener("click", function () {
        modaloverlay.classList.remove("overlayshows");
    });
 
 window.addEventListener('click', function(e){ 
    if ((modaloverlay.classList.contains("overlayshows")) && (e.target != modaloverlay)) {
         modaloverlay.classList.remove("overlayshows");
      }
  });

.overlay {
    background: rgba(0,0,0,.9);
    padding: 20px;
    position: fixed;
    top: 10px;
    bottom: 10px;
    left: 0;
    right: 0;
    align-items: center;
    justify-content: center;
    display: none;
    max-width: 600px;
    margin: 0 auto;
    color: #fff
}
.overlayshows {
    display: block;
}
.closebutton {
  cursor: pointer;
  float: right;
}

<div class="modal">
  <h1>Content</h1>
  <button id="read">READ MORE</button>
</div>

 <div class="overlay" id="modaloverlay">
<span  class="closebutton">X</span>
    <div class="modalinfo" >
        Morecontent
     </div>
</div>

当我点击按钮时，模式被打开，这部分很简单；我知道如果我删除 js 的最后一部分它会工作，但我希望如果你点击模态，模态将关闭，我不知道出了什么问题。谢谢:)

Answer 1

W3schools 有一个很好的模态教程：https://www.w3schools.com/howto/howto_css_modals.asp

如果用户在模态框外单击则关闭模态框的代码如下：

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

Answer 2

这solution创建了一个模态单例，以便更容易地管理组件的生命周期。它还使用事件委托来简化事件管理。您的解决方案的关键问题不是阻止模态点击事件传播。

  
const modal = {
   CLASSES: {
     SHOW: 'overlayshows',
     CLOSE_BUTTON: 'closebutton',
     MODAL: 'modaloverlay',
     READ: 'read'
   },
   isVisible: false,
   el: document.getElementById("modaloverlay"),
   initialize() {
     modal.addEvents();
   },
   show() {
     modal.el.classList.add(modal.CLASSES.SHOW);
     modal.isVisible = true;
   },
   hide() {
     modal.el.classList.remove(modal.CLASSES.SHOW);
     modal.isVisible = false;
   },
   addEvents() {
     modal.removeEvents();
     modal.el.addEventListener('click', modal.eventHandlers.onModalClick);
     window.addEventListener('click', modal.eventHandlers.onWindowClick);
   },
   removeEvents() {
     modal.el.removeEventListener('click', modal.eventHandlers.onModalClick);
     window.removeEventListener('click', modal.eventHandlers.onWindowClick);
   },
   eventHandlers: {
     onModalClick(event) {
       event.stopImmediatePropagation();
       if (!event.target) {
         return;
       }
       
       if (event.target.classList.contains(modal.CLASSES.CLOSE_BUTTON)) {
         modal.hide();
       }
     },
     onWindowClick(event) {
       if (event.target.classList.contains(modal.CLASSES.READ)) {
         modal.show();
       } else {
         modal.hide();
       }
     }
   } 
 }

modal.initialize();

当用户在模态外单击时，Javascript 关闭模态

Japascript Close modal when user click outside the modal

html

javascript

css

modal-dialog