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

Question

当用户在模态之外单击时，“id03”似乎有效，然后它将关闭，而“id02”和“id01”不起作用。 用户在模态外单击，然后什么也没有发生

<script>
function messagesending(e) {
        document.getElementById("id01").style.display="block";
    }

    function refusealert(e) {
        document.getElementById("id02").style.display="block";
    }

    function confirmalert(e) {
        document.getElementById("id03").style.display="block";
    }

<script>
// Get REFUSE modal
var modal = document.getElementById('id01');        
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
    modal.style.display = "none";
}
}    
 </script>

 <script>
 // Get CONFIRMATION modal
 var modal = document.getElementById('id02');        
 // When the user clicks anywhere outside of the modal, close it
 window.onclick = function(event) {
 if (event.target == modal) {
    modal.style.display = "none";
}
}    
 </script>

 <script>
 // Get SENDMESSAGE modal
 var modal = document.getElementById('id03');        
 window.onclick = function(event) {
 if (event.target == modal) {
    modal.style.display = "none";
}
}    
 </script>

 <script>
    $(document).ready(function(){
    $("#oni").click(function(){
    $("#container").toggle(1000);
    });
 </script>

有什么我错过的吗？ 基本上“id01”、“id02”、“id03”都在相同的css代码中，我只是复制并粘贴了不同的内容。 请参考这个https://jsfiddle.net/r3qt7fdg/

Answer 1

正如 kwiat1990 提到的问题是，我从你的代码中读到的，全局document.getElementById('id03') var modal 被覆盖，最终成为document.getElementById('id03') 。 onclick函数内的代码在单击后执行。 那时event.target == modal只会对 sendmessage 模态成立。

简单的解决方法是在 click 函数内移动var modal ，使其成为函数的本地。 我还删除了多余的脚本标签并正确关闭了 $(document).ready 函数。

编辑：当然window.onclick会设置窗口的 onclick 属性，所以每个都覆盖另一个并且只保存最后一个。 因此，需要添加事件侦听器：

<script>
window.addEventListener("click", function(event) {
  // Get REFUSE modal
  var modal = document.getElementById('id01');
  // When the user clicks anywhere outside of the modal, close it
  if (event.target == modal) {
    modal.style.display = "none";
  }
});

window.addEventListener("click", function(event) {
  // Get CONFIRMATION modal
  var modal = document.getElementById('id02');
  // When the user clicks anywhere outside of the modal, close it
  if (event.target == modal) {
    modal.style.display = "none";
  }
});

window.addEventListener("click", function(event) {
  // Get SENDMESSAGE modal
  var modal = document.getElementById('id03');
  // When the user clicks anywhere outside of the modal, close it
  if (event.target == modal) {
    modal.style.display = "none";
  }
});    
</script>

https://jsfiddle.net/r3qt7fdg/1/

此外，1 个事件侦听器就足够了，例如通过检查元素的 className：

window.addEventListener("click", function(event) {
  // When the user clicks on element with class="modal", close it
  console.log(event.target); // element that was clicked
  if (event.target.className == "modal") {
    event.target.style.display = "none";
  }
});

https://jsfiddle.net/r3qt7fdg/2/

也许更好的是听点击“.modal”本身。 在 jquery 中，它将是：

$(".modal").click(function() {
  if (event.target.className == "modal") {
    $(event.target).hide();
  }
});

Answer 2

var modalA = document.getElementById('id01');

// Get the modal
var modal = document.getElementById('id02');

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