我认为问题出在我的 JS 上,因为我可以在单击模态按钮时成功添加“active”类,但是当单击模态按钮上的关闭按钮时,我的 JS 没有删除“active”类。 这是我的 HTML: 这是我的 SCSS 最后我的JS 提前致谢! 添加占位符文本 b/c 如果没有更多文本,我无法发布:L ...
提示:本站收集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
属性,或使用 class 名称和modal.classList.has("hidden")
, modal.classList.add("hidden")
, modal.classList.remove("hidden")
, with .hidden { display: none; }
在您的.hidden { display: none; }
中。 请参阅Element.prototpye.classList
。 如果您确实使用了hidden
属性,请删除 CSS 默认值,然后像我在上面的代码中所做的那样简单地将hidden
属性添加到您的模式中。
我还用const
替换了var
,用addEventListener
替换了onclick
,用严格的相等替换了抽象相等。 我还使用了更多语义变量名称(例如closeButton
而不是span
)。
您的 CSS 中还有一个错字: padding-top: 50x;
而不是padding-top: 50px;
.
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.