當用戶在模態外單擊時，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();