Question

＆＃39; id03＆＃39;当用户在模态外部点击然后它将关闭时，似乎正在工作，而＆＃39; id02＆＃39;和＆＃39; id01＆＃39;没有用。用户在模态外单击然后没有任何反应

<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>

有什么我错过的吗？基本上是＆＃39; id01＆＃39;，＆＃39; id02＆＃39;，＆＃39; id03＆＃39;是相同的CSS代码，我只是复制和粘贴不同的内容。请参阅此https://jsfiddle.net/r3qt7fdg/

Answer 1

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

简单的解决方法是在点击功能中移动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";      
     }
}

用户在模态

2 个答案: