繁体   English   中英

当我单击 X 或外部时,模态不会关闭

Modal not closing when I click X or outside

提示:本站收集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">&times;</span> <p class="text-center"> Model: Toyota<br> Mileage: 28,000 km <br> Transmission: Auto<br> Cost: $10,000 </p> </div> </div>

我的目标是当我单击 X 或模态外部时,模态关闭。

2 个回复

我已经解决了一些问题:

  • 模态框的高度,占用 100% 的空间,从而影响点击
  • 在文档上放置一个侦听器,如果状态为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">&times;</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">&times;</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替换了varaddEventListener替换了onclick用严格的相等替换了抽象相等 我还使用了更多语义变量名称(例如closeButton而不是span )。

您的 CSS 中还有一个错字: padding-top: 50x; 而不是padding-top: 50px; .

1 单击关闭“X”时,为什么我的模态不会关闭?

我认为问题出在我的 JS 上,因为我可以在单击模态按钮时成功添加“active”类,但是当单击模态按钮上的关闭按钮时,我的 JS 没有删除“active”类。 这是我的 HTML: 这是我的 SCSS 最后我的JS 提前致谢! 添加占位符文本 b/c 如果没有更多文本,我无法发布:L ...

2 单击外部时,多个模态不会关闭

我在这里遵循这个啧啧: https : //www.w3schools.com/howto/howto_css_modals.asp问题是当我创建两个这样的模态时,第一个在我点击它之外时不会关闭。 这是jsfiddle: https ://jsfiddle.net/j1smeu3c/ ...

3 单击时模态不会关闭

所以我有一个菜单,点击时模型会弹出。 在每个模型中,都有一个关闭按钮,标有“x”。 唯一的问题是,当单击“x”时,模型不会关闭。 我尝试了多种方法来解决这个看似简单的问题。 但没有运气。 我试过,使用 z-index 属性,我试过摆弄 div。 我试图链接到引导程序外部链接。 我尝试过不同类型的“ ...

5 单击背景或按 esc 时,模态不会关闭

在我的网站上,我有一个内置于 Bootstrap 4 的 Lightbox,带有一个打开图像以查看更大版本的模式。 这一切都很好,但关闭模式的唯一方法是单击右上角屏幕上的 X。 我知道默认情况下,Modals 在单击背景时会关闭,我需要帮助以使其正常工作。 非常感谢 @charset "UTF-8" ...

6 在单击模态本身时,关闭外部单击会关闭。 在模式之外的任何地方单击时,基本上不应该关闭

这段代码之前对我有用,但是我不确定我要在其中使用的其他组件的更改。 我尝试使用钩子来打开和关闭模式,并且仅在单击事件侦听器上使用,但是两次都在单击页面上的任何位置时都关闭。 不知道这是否足够的信息。 但这让我发疯。 我还尝试添加有人建议的dontCloseModal函数: ...

8 在模态之外单击时,Javascript模态不会关闭

因此,我是javascript新手,并且正在尝试为包含Nav的网站设置模式。 我希望用户每次在其外部单击时都可以关闭该模式,这很容易,并且大量教程向我展示了不同的方法,但是所有这些方法都出错或不起作用。 作为参考,这里是我的HTML: javascript如下: 当我在导航栏 ...

10 单击X时,form1不会关闭

我有一个小小的问题。我需要在Visual Studio UPDATE中停止它: Form1不再关闭。 在我的Form1 ,我有一个代码,在其中创建Form2 - Dim f as New Fomr2实例Dim f as New Fomr2但是当我按下它的X按钮时,它关闭并且我无法再次 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM