javascript - 模态不会在按钮和/或窗口单击事件时关闭

Question

我在一个不起作用的模式旁边有一个关闭按钮，我正在努力弄清楚（尽管其他票证中提供了所有资源）。当我单击模态框外的任何位置时，模态框也不会关闭。

// Get the modal
var modal = document.getElementById("myModal");

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function() {
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("closebtn")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

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

<div class="card-header">
  <!-- Trigger the Modal -->
  <img id="myImg" src="pathtomyimage" alt="mycaptiontext" style="width:100%;max-width:600px">

  <!-- The Modal -->
  <div id="myModal" class="modal">

    <!-- The Close Button -->
    <span class="closebtn">&times;</span>

    <!-- Modal Content (The Image) -->
    <img class="modal-content" id="img01">

    <!-- Modal Caption (Image Text) -->
    <div id="caption"></div>
  </div>
</div>

标签： javascripthtml

Answer 1

使发布的代码正常工作的两个更改：

1. 在打开模式的单击处理程序中停止事件传播。

   • 如果没有停止，则打开模态的单击会到达窗口单击处理程序并在打开模态后立即关闭它。

2. 解决窗口单击处理程序中的拼写错误正在检查 (event.target == modal)而不是检查的问题(event.target != modal)，但如果用户单击模式元素本身内的元素，则简单地测试会(event.target != modal)返回误报。

   代码片段解决了element.closest用于检测是否event.target具有modal类或具有类的祖先元素的组合问题modal。

"use strict";
// Get the modal
var modal = document.getElementById("myModal");

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function( event){
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
    event.stopPropagation();  // prevent event reaching window.onclick
    }

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("closebtn")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function(){
    modal.style.display = "none";
}

/*** updated window.onclick hander ***/
// When the user clicks anywhere outside of the modal, close it 
window.onclick = function(event){
    let modalContainer = event.target.closest(".modal");
    if( modalContainer === null && modal.style.display == "block") {
       modal.style.display = "none";
    }
}

img {
    min-height: 4rem;
    min-width: 4rem;
    border: medium solid blue;
}
.closebtn { 
    font-size:200%;
    color:white;
    background-color: red;
}
.modal {
    background-color: yellow;
    display: none;
}

<div class="card-header">
    <!-- Trigger the Modal -->
    <img id="myImg" src="pathtomyimage" alt="mycaptiontext" style="width:100%;max-width:600px">
    
    <!-- The Modal -->
    <div id="myModal" class="modal">
    
        <!-- The Close Button -->
        <span class="closebtn">&times;</span>
    
        <!-- Modal Content (The Image) -->
        <img class="modal-content" id="img01">
    
        <!-- Modal Caption (Image Text) -->
        <div id="caption"></div>
    </div>
</div>