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

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

该 解决方案创建了一个模态 singleton，以便更轻松地管理组件的生命周期。 它还使用事件委托来简化事件管理。 您的解决方案的关键问题是没有阻止模态点击事件的传播。

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