时间戳

首页 > 解决方案 > 使用javascript隐藏弹出窗口

javascript - 使用javascript隐藏弹出窗口

问题描述

我有一个页面实现了多个仅 CSS 的弹出窗口。单击“X”时弹出窗口工作正常并关闭。但是，当用户单击页面上的任何位置时，我希望它们关闭。为此，我实现了一个简短的 javascript 代码，它会在任何点击时关闭它们，但它们不会再次打开（直到页面刷新）。我猜该状态被保存为“无”。我该如何解决？

编码：

window.onclick = function(event) {
  if (event.target.className === "overlay") {
    event.target.style.display = "none";
  }
}
<div class="editbutton"> 						
<a class="btn btn-link" href="#popupedit">Edit</a></div>

<div id="popupedit" class="overlay">
<div class="popup10">
<a class="close" href="#"></a>
........
</div>
</div>

 <div class="editbutton"> 						
<a class="btn btn-link" href="#popupedit1">Edit</a></div>

<div id="popupedit1" class="overlay">
<div class="popup10">
<a class="close" href="#"></a>
........
</div>
</div>

 <div class="editbutton"> 						
<a class="btn btn-link" href="#popupedit2">Edit</a></div>

<div id="popupedit2" class="overlay">
<div class="popup10">
<a class="close" href="#"></a>
........
</div>
</div>

CSS 代码：

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
  z-index: 2000;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup10 {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 50%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup10 h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup10 .close {
  position: absolute;
  top: 8px;
  right: 10px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup10 .close:hover {
  color: #06D85F;
}
.popup10 .content {
  max-height: 30%;
  overflow: auto;
}

标签： javascripthtmlcss

解决方案

这是您应该在 javascript 中更新的代码。

window.onclick = function(event) {
  if (event.target.className === "btn btn-link") {
    document.getElementById('popupedit').style.display = "block";
  }
  if (event.target.className === "overlay") {
    event.target.style.display = "none";
  }
}

弹窗没有再次打开的原因是你在点击部件时设置了覆盖部件，display: none但没有设置回display: block.

display: block因此，您应该在单击编辑按钮时再次将弹出布局设置回。

请查看结果：https ://jsfiddle.net/254xmyv7/3/

希望这会有所帮助。:)

推荐阅读