提示:本站收集StackOverFlow近2千万问答，支持中英文搜索，鼠标放在语句上弹窗显示对应的参考中文或英文， 本站还提供 中文繁体 英文版本 中英对照 版本，有任何建议请联系yoyou2525@163.com。
我为我的网站设置的模式打开但当我单击 X 按钮或外部时不会关闭。
当我在浏览器中运行我的代码时，我可以单击该按钮并且它可以工作。 但它不会关闭。 我不确定错误是什么或为什么这不起作用。
var modal = document.getElementById("WhiteSedan1") var btn1 = document.getElementById("BtnWhiteSedan") var span = document.getElementsByClassName("close")[0]; btn1.onclick = function() { modal.style.display = "block"; } span.onclick = function() { modal.style.display = "none"; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } }
.modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 50x; /* Location of the box */ left: 0; top: 0; width: 50%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0, 0, 0); /* Fallback color */ background-color: rgba(0, 0, 0, 0); /* Black w/ opacity */ } /* Modal Content */ .modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 80%; } /* The Close Button */ .close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; }
<div class="desc"> <a href="#" class="btn btn-outline-primary" id="BtnWhiteSedan">White Sedan</a> </div> <div id="WhiteSedan1" class="modal"> <div class="modal-content"> <span class="close">×</span> <p class="text-center"> Model: Toyota<br> Mileage: 28,000 km <br> Transmission: Auto<br> Cost: $10,000 </p> </div> </div>
我的目标是当我单击 X 或在模态之外时，模态关闭。
我已经解决了一些问题：
block或按钮，它将触发模态。 var modal = document.getElementById("WhiteSedan1") var btn1 = document.getElementById("BtnWhiteSedan") var span = document.getElementsByClassName("close")[0]; window.onclick = function(event) { if(btn1.contains(event.target)){ modal.style.display = "block"; }else{ if (!modal.contains(event.target) && modal.style.display === "block" || span.contains(event.target)) { modal.style.display = "none"; } } }
.modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 50x; /* Location of the box */ left: 0; top: 0; width: 50%; overflow: auto; height: auto; z-index: 1px; /* Enable scroll if needed */ background-color: rgb(0, 0, 0); /* Fallback color */ background-color: rgba(0, 0, 0, 0); /* Black w/ opacity */ } /* Modal Content */ .modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 80%; } /* The Close Button */ .close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; }
<div class="desc"> <a href="#" class="btn btn-outline-primary" id="BtnWhiteSedan">White Sedan</a> </div> <div id="WhiteSedan1" class="modal"> <div class="modal-content"> <span class="close">×</span> <p class="text-center"> Model: Toyota<br> Mileage: 28,000 km <br> Transmission: Auto<br> Cost: $10,000 </p> </div> </div>
我建议将所有打开/关闭模式事件侦听器合并为一个，否则多个事件侦听器会连续运行，但您只希望发生一个操作。
实现此行为的一种方法是检查event.target ：如果单击BtnWhiteSedan元素，则打开模态； 否则，如果模态和模态内的任何东西都没有被点击，除了×按钮，关闭模态。 参见Node.prototype.contains 。
由于event仅用于event.target ，因此使用解构直接获取target属性。
const modal = document.getElementById("WhiteSedan1"), openButton = document.getElementById("BtnWhiteSedan"), [ closeButton ] = document.getElementsByClassName("close"); addEventListener("click", ({target}) => { if (target === openButton) { modal.hidden = false; } else if(target !== modal && !modal.contains(target) || target === closeButton){ modal.hidden = true; } });
.modal { position: fixed; z-index: 1; padding-top: 50px; left: 0; top: 0; width: 50%; height: 100%; overflow: auto; background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0); } .modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 80%; } .close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; }
<div class="desc"> <a id="BtnWhiteSedan" class="btn btn-outline-primary" href="#">White Sedan</a> </div> <div id="WhiteSedan1" class="modal" hidden> <div class="modal-content"> <span class="close">×</span> <p class="text-center">Model: Toyota<br> Mileage: 28,000 km<br>Transmission: Auto<br> Cost: $10,000</p> </div> </div>
检查 CSS 属性并不总是可靠的。 改用hidden属性，或使用类名和modal.classList.has("hidden") , modal.classList.add("hidden") , modal.classList.remove("hidden") , with .hidden { display: none; } .hidden { display: none; }在你的CSS。 请参阅Element.prototpye.classList 。 如果您确实使用了hidden属性，请删除 CSS 默认值，然后像我在上面的代码中所做的那样，向您的模态添加一个hidden属性。
我还将var替换为const ， onclick替换为addEventListener ，抽象相等替换为严格相等。 我还使用了更多语义变量名称（例如closeButton而不是span ）。
您的 CSS 中还有一个错字： padding-top: 50x; 而不是padding-top: 50px; .
声明：本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.