Javascript 当用户在模式外单击时关闭模式

当用户在模式外单击时，“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>

功能消息发送（e）{
document.getElementById（“id01”）.style.display=“block”；
}
函数（e）{
document.getElementById（“id02”）.style.display=“block”；
}
函数确认器（e）{
document.getElementById（“id03”）.style.display=“block”；
}
//获取拒绝模式
var modal=document.getElementById（'id01'）；
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}    
//获取确认模式
var modal=document.getElementById（'id02'）；
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}    
//获取发送消息模式
var modal=document.getElementById（'id03'）；
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}    
$（文档）.ready（函数（）{
$（“#oni”）。单击（函数（）{
$（“#容器”）。切换（1000）；
});

---

有什么我遗漏了吗？基本上，“id01”、“id02”、“id03”都在相同的css代码中，我只是复制并粘贴了不同的内容。请参考这篇文章，正如kwiat1990所提到的，问题是，我从你的代码中读到的是，全局变量模式被覆盖，最终成为

文档。getElementById（'id03'））

。单击后执行

onclick

函数中的代码。此时

event.target==modal

仅对sendmessage模式为真

简单的解决方法是将

var modal

移动到click函数内部，使其成为函数的本地部分。我还删除了多余的脚本标记，并正确关闭了$（document）.ready函数

编辑：当然是

window。onclick

将设置window的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>

也许更好的办法是听一下“.modal”本身。在jquery中，它应该是：

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

---

我不确定，但如果最新的示例有效，我敢打赌您的问题在于

var-modal

。尝试更改所有实例的名称，例如modal1、modal2和modal3。我尝试使用“modal1”、“modal2”、“modal3”重命名var-modal，但仍然无效。如果在modalit之外单击，modal会显示，但无法关闭移动var模式并使用'modal1'，'modal2'，'modal3'重命名var模式。好的，请添加您使用的html。指向工作示例的公共链接将非常有用，或者在jsfiddle.net上进行演示。当然，我在想什么。我将编辑我的答案。因此，不鼓励使用代码转储。高质量的答案包括一个突出说明speci的说明FIC的部分，解决了OP的问题和如何/为什么他们这样做。必须赞成随着时间的推移，随着未来渔业从你的帖子学到一些东西，他们能够应用到他们自己的编码问题。请考虑编辑，以提高长期价值的邮政。

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

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";      
     }
}