📌  相关文章
📜  在 div 的外部单击时关闭 div 弹出窗口 (1)

📅  最后修改于: 2023-12-03 14:50:54.026000             🧑  作者: Mango

关闭 div 弹出窗口

在 web 应用程序开发中，弹出窗口常常被用来展示提示信息、表单、菜单等内容。在某些情况下，我们需要在单击弹出窗口外部时将其关闭，为用户提供更好的体验。本文将介绍如何通过 JavaScript 实现在 div 外部单击时关闭弹出窗口。

HTML 结构

在本示例中，我们将创建一个简单的 HTML 结构。一个按钮将用来触发弹出窗口，另一个按钮将用来关闭弹出窗口。弹出窗口将被放置在一个名为 overlay 的 div 中。

<button id="open-btn">打开弹出框</button>

<div id="overlay" style="display: none;">
  <button id="close-btn">关闭弹出框</button>
</div>
CSS 样式

为了让弹出窗口覆盖整个页面，并在外部单击时关闭，我们需要添加一个遮罩层。弹出窗口和遮罩层都需要进行样式设置。

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

#overlay button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
  font-size: 16px;
}
JavaScript 代码

为了使弹出窗口在单击外部关闭，我们需要监听整个页面的单击事件。如果单击的是 overlay 外部的元素，则关闭弹出窗口。

// 获取页面元素
var openBtn = document.getElementById('open-btn');
var closeBtn = document.getElementById('close-btn');
var overlay = document.getElementById('overlay');

// 打开弹出窗口
openBtn.addEventListener('click', function() {
  overlay.style.display = 'block';
});

// 关闭弹出窗口
closeBtn.addEventListener('click', function() {
  overlay.style.display = 'none';
});

// 点击遮罩层关闭弹出窗口
overlay.addEventListener('click', function(e) {
  if (e.target === overlay) {
    overlay.style.display = 'none';
  }
});
完整代码
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>关闭 div 弹出窗口</title>
  <style>
    #overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
    }

    #overlay button {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 10px;
      font-size: 16px;
    }
  </style>
</head>
<body>

<button id="open-btn">打开弹出框</button>

<div id="overlay" style="display: none;">
  <button id="close-btn">关闭弹出框</button>
</div>

<script>
  // 获取页面元素
  var openBtn = document.getElementById('open-btn');
  var closeBtn = document.getElementById('close-btn');
  var overlay = document.getElementById('overlay');

  // 打开弹出窗口
  openBtn.addEventListener('click', function() {
    overlay.style.display = 'block';
  });

  // 关闭弹出窗口
  closeBtn.addEventListener('click', function() {
    overlay.style.display = 'none';
  });

  // 点击遮罩层关闭弹出窗口
  overlay.addEventListener('click', function(e) {
    if (e.target === overlay) {
      overlay.style.display = 'none';
    }
  });
</script>

</body>
</html>

以上就是关闭 div 弹出窗口的完整实现代码。