我正在查看W3的如何通过单击模态框外部来关闭模态的方法。https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_modal_close
为什么这样做？我认为如果您写if (event.target !== modal)隐藏模态将是正确的。关于window.onclick是否有我不了解的内容？谢谢您的帮助。
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
<h2>W3.CSS Modal</h2>
<p>In this example we demonstrate how to close the modal by clicking outside of the modal box.</p>
<button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Open Modal</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content w3-card-4">
<header class="w3-container w3-teal">
<span onclick="document.getElementById('id01').style.display='none'"
class="w3-button w3-display-topright">×</span>
<h2>Modal Header</h2>
</header>
<div class="w3-container">
<p>You have two options to close this modal:</p>
<p>Click on the "x" or click anywhere outside of the modal!</p>
</div>
<footer class="w3-container w3-teal">
<p>Modal Footer</p>
</footer>
</div>
</div>
</div>
<script>
// Get the 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>
如果您查看页面，您会看到带有div的id01具有：
position: fixed;
width: 100%;
height: 100%;
这会使div填充孔页面，因此无论您在页面上单击什么位置，都将关闭modal。
不会触发此事件的唯一元素是<div class="w3-modal-content w3-card-4">，即显示内容（标题，文本，填充物）的模式内容div。
不要将var modal = document.getElementById('id01');与您在示例中看到的模态混淆。
变量中的模式是页面顶部的灰色叠加层。它作为模态内容的空白画布覆盖了整个页面。
您要隐藏的模式是最上面的div，即“模式内容”。 enter image description here
单击“模态内容”之外的内容实际上是单击灰色div叠加层，在此示例中，该叠加层在称为modal的变量中引用。
希望如此。