Question

我正在尝试创建一个简单的模态。我希望它在用户单击窗口中的任何位置时都关闭-但是，即使事件目标设置为整个模态，也仅当用户在模态之外单击时，模态才会关闭。

我知道问题出在javascript代码的最后一行，但是我不明白为什么...我定义了e.target == modal，其中modal是整个模式的HTML元素，包括子元素（按modal-content类）。但是，modal-content类似乎不受e.target == modal的影响。

这是完整的代码：

//Get modal element
var modal = document.getElementById('simpleModal');
//Get open modal button
var modalBtn = document.getElementById('modalBtn');
//Get close button
var closeBtn = document.getElementsByClassName('closeBtn')[0];


//Listen for click
modalBtn.addEventListener('click', openModal);

//Listen for close clock
closeBtn.addEventListener('click', closeModal);

//Listen for outside click
window.addEventListener('click', outsideClick);


//Fucntion to open modal
function openModal(){
    modal.style.display = 'block';
}

//Fucntion to close modal
function closeModal(){
    modal.style.display = 'none';
}


function outsideClick(e){
    if(e.target == modal){
        modal.style.display = 'none';
    }
    


}

body{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    line-height:1.6;
}

.button{
    background: coral;
    padding: 1em 2em;
    color: #fff;
    border: 0px;
}

.button:hover{
    background: #333;
}

.modal{
    display:none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    height:100%;
    width:100%;
    overflow:auto;
    background-color:rgba(0, 0, 0, 0.5);
    animation-name:modalopen;
    animation-duration:1s;
}

.modal-content{
    background-color: #f4f4f4;
    margin: 20% auto;
    padding:20px;
    width: 70%;
    box-shadow: 10px 20px 40px rgba(0, 0, 0);
}

.closeBtn{
    color:#ff0000;
    float:right;
    font-size:30px;
}

.closeBtn:hover, .closeBtn:focus{
    color:#000;
    text-decoration: none;
    cursor:pointer;
}

@keyframes modalopen{
    from{opacity: 0}
    to{opacity:1}
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content ="width=device-width, initial-scale=1.0">
    <title>Simple Modal</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <button id="modalBtn" class="button">Click Here</button>
    
    <div id="simpleModal" class="modal">
        <div class="modal-content">
            <span class="closeBtn">&times;</span>
            <p>Hello...I am a modal</p>
        </div>
    </div>

    <script src="main.js"></script>
</body>
</html>

Answer 1

您必须将EventListener添加到模式中，以便在单击事件时将其关闭。此外，由于在页面未完全呈现时添加了事件侦听器，因此可能会出现一些问题，要解决此问题，您必须坚持DOMContentLoaded事件。将添加的侦听器包装到函数中，并在DOMContentLoaded事件上调用它以解决问题，请参见下面的工作代码段：

document.addEventListener('DOMContentLoaded', function(){
  //Get modal element
  var modal = document.getElementById('simpleModal');
  //Get open modal button
  var modalBtn = document.getElementById('modalBtn');
  //Get close button
  var closeBtn = document.getElementsByClassName('closeBtn')[0];

  //Fucntion to open modal
  function openModal(){
      modal.style.display = 'block';
  }

  //Fucntion to close modal
  function closeModal(){
      modal.style.display = 'none';
  }


  function outsideClick(e){
      if(e.target == modal){
          modal.style.display = 'none';
      }



  }
  //Listen for click
  modalBtn.addEventListener('click', openModal);
  modal.addEventListener('click', closeModal);
  //Listen for close clock
  closeBtn.addEventListener('click', closeModal);
  //Listen for outside click
  window.addEventListener('click', outsideClick);
});

body{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    line-height:1.6;
}

.button{
    background: coral;
    padding: 1em 2em;
    color: #fff;
    border: 0px;
}

.button:hover{
    background: #333;
}

.modal{
    display:none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    height:100%;
    width:100%;
    overflow:auto;
    background-color:rgba(0, 0, 0, 0.5);
    animation-name:modalopen;
    animation-duration:1s;
}

.modal-content{
    background-color: #f4f4f4;
    margin: 20% auto;
    padding:20px;
    width: 70%;
    box-shadow: 10px 20px 40px rgba(0, 0, 0);
}

.closeBtn{
    color:#ff0000;
    float:right;
    font-size:30px;
}

.closeBtn:hover, .closeBtn:focus{
    color:#000;
    text-decoration: none;
    cursor:pointer;
}

@keyframes modalopen{
    from{opacity: 0}
    to{opacity:1}
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content ="width=device-width, initial-scale=1.0">
    <title>Simple Modal</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <button id="modalBtn" class="button">Click Here</button>

    <div id="simpleModal" class="modal">
        <div class="modal-content">
            <span class="closeBtn">&times;</span>
            <p>Hello...I am a modal</p>
        </div>
    </div>

    <script src="main.js"></script>
</body>
</html>

Answer 2

您所需要的只是在正确的位置致电window.addEventListener，即可检查此test。

//.. code
//Function to open modal
function openModal(){
    modal.style.display = 'block';
    setTimeout(function(){
        window.addEventListener('click', outsideClick);
    },200)
}

//Fucntion to close modal
function closeModal(){
   modal.style.display = 'none';
}


function outsideClick(e){
   modal.style.display = 'none';
   window.removeEventListener('click',outsideClick)
}

模态未正确关闭

2 个答案: