如何使用 Javascript 隐藏弹出窗口/div？

Question

我正在为我的网站构建一个设置菜单，该菜单将显示为弹出窗口。目前，我可以通过单击链接到 it.However 的按钮来 open/close 此弹出窗口，我想实现一种方法来关闭此 popup/div，只需在弹出窗口外单击即可。

我相信JavaScript可以完成这个动作，不幸的是，我还不太熟练使用这种语言。

有没有人有满足我需求的解决方案，这就是我正在使用的...

提前致谢:)

var settingsmenu = document.querySelector(".settings-menu");

function settingsMenuToggle(){
    settingsmenu.classList.toggle("settings-menu-height");
}

.settings-menu{
  position: absolute;
  width: 90%;
  max-width: 350px;
  background: var(--color-light);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  border-radius: 4px;
  overflow: hidden;
  top: 84px;
  right: 9%;
  max-height: 0;
  transition: max-height 0.3s;
}

.settings-menu-height{
  max-height: 300px;
}



.settings-menu-inner{
  padding: 20px;
}

<div class="create">
    <figure onclick="settingsMenuToggle()">
      <button>Open Popup</button>
    </figure>
</div>



<div class="settings-menu">

  <div class="settings-menu-inner">

    <figure>
      <img src="https://images.macrumors.com/t/Y_7ongT7QQ-k0uYwUE4uCoCO3TI=/800x0/article-new/2019/08/apple-settings-icon-19.jpg-250x250.jpg?lossy" width="100" height="100">
      <h3>This is a popup</h3>
    </figure>


   </div>
</div>

Answer 1

这很简单，您可以将当前的弹出窗口包裹在一个额外的 div 中；所以如果你现在有：

<div class="settings-menu">
  ...stuff...
</div>

然后你把它变成：

<div class="popover-backplate">
  <div class="settings-menu">
    ...stuff...
  </div>
</div>

接下来你添加一些 CSS 比如：

.popover-backplate {
    position:         fixed;
    width:            100vw;
    height:           100vh;
    background-color: red;
    opacity:          0.5;
}

如果这有效，那么整个页面上应该有一个半透明的红色覆盖层（无论如何，弹出窗口之外的所有内容）。如果不是这种情况，那么您可能必须在 settings-menu and/or popover-backplate.

中添加 z-index 属性

视觉部分工作后，剩下的就是在 popover-backplates onclick-事件下添加一点 javascript，它调用您的 popover_close()-函数（不管它叫什么）。

Answer 2

您可以将弹出窗口包装在另一个元素中 - 这是最简单的方法之一。比方说，它将有 class“色调”，并且在其中将包含您的弹出窗口 div。而要在后台捕捉事件，可以在文档中添加一个事件监听器，每次检查点击目标。如果点击目标是背景（即我们的“tint”），我们只是隐藏“tint”元素，事件不会再次触发，因为它有 once: true. 否则我们再次设置事件。当然，这只是一个简单的演示片段。您可以根据需要对其进行扩展和修改。

function documentLoaded(fn) {
  if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}

function popupClickListener(e){
  if (e.target.classList.contains('tint')) {
    document.querySelector('.tint').style.display = 'none';
  } else {
        document.addEventListener('click', popupClickListener, {once: true});
  }
}

documentLoaded(function(){
  document.querySelector('.show-popup').onclick = function(){
    document.querySelector('.tint').style.display = 'block';
    document.addEventListener('click', popupClickListener, {once: true});
  }
});

.tint {
  position: fixed;
  display: none;
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  background: rgba(0, 0, 0, 0.7);
  z-index: 10000;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  text-align: center;
  vertical-align: middle;
}
.popup {
  position: relative;
  display: inline-block;
  background: #fff;
  width: calc(100% - 20px);
  max-width: 550px;
  min-height: 130px;
  margin: 50px 10px;
  border-radius: 10px;
  vertical-align: middle;
  overflow: hidden;
  -webkit-transform: translateZ(0px);
}

<div class="tint">
  <div class="popup">popup-content</div>
</div>
<div class="page-content">
  some content<br>
  <button class="show-popup">show popup</button>
</div>

如何使用 Javascript 隐藏弹出窗口/div？

How to hide a popup / div using Javascript?

javascript

html

css

popup

hide