JS弹出层的显示与隐藏示例代码

JS弹出层是Web开发中非常常见的一个功能。下面，我们来详细讲解如何实现JS弹出层的显示与隐藏。

1. HTML结构

首先，我们需要进行HTML结构的搭建。以下是一个最基础的HTML结构：

<!--触发弹出层的按钮-->
<button id="showBtn">显示弹出层</button>

<!--弹出层-->
<div id="popup">
  <p>这里是弹出层的内容</p>
  <button id="hideBtn">隐藏</button>
</div>

2. CSS样式

接下来，我们为弹出层添加样式。这里，我们设置弹出层的初始状态为隐藏（display:none），当用户点击按钮后，弹出层才显示出来。

#popup {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

3. JS实现

最后，我们采用JavaScript来实现弹出层的显示与隐藏。这里，我们为按钮绑定点击事件，在点击按钮时显示弹出层，在点击弹出层上的“隐藏”按钮时隐藏弹出层。

//获取按钮
var showBtn = document.getElementById("showBtn");
var hideBtn = document.getElementById("hideBtn");

//获取弹出层
var popup = document.getElementById("popup");

//显示弹出层
showBtn.onclick = function() {
  popup.style.display = "block";
}

//隐藏弹出层
hideBtn.onclick = function() {
  popup.style.display = "none";
}

通过如上代码，我们即可实现JS弹出层的显示与隐藏功能。具体效果可以参考以下两个示例：

示例1:

<!DOCTYPE html>
<html>
  <head>
    <title>示例1 - JS弹出层的显示与隐藏</title>
    <style type="text/css">
      #popup {
        display: none;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 200px;
        background-color: #fff;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      }
    </style>
  </head>
  <body>
    <!--触发弹出层的按钮-->
    <button id="showBtn">显示弹出层</button>

    <!--弹出层-->
    <div id="popup">
      <p>这里是弹出层的内容</p>
      <button id="hideBtn">隐藏</button>
    </div>

    <script type="text/javascript">
      //获取按钮
      var showBtn = document.getElementById("showBtn");
      var hideBtn = document.getElementById("hideBtn");

      //获取弹出层
      var popup = document.getElementById("popup");

      //显示弹出层
      showBtn.onclick = function() {
        popup.style.display = "block";
      }

      //隐藏弹出层
      hideBtn.onclick = function() {
        popup.style.display = "none";
      }
    </script>
  </body>
</html>

示例2:

<!DOCTYPE html>
<html>
  <head>
    <title>示例2 - JS弹出层的显示与隐藏</title>
    <style type="text/css">
      .popup {
        display: none;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 300px;
        background-color: #fff;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      }

      .popup h2 {
        margin-top: 0;
      }
    </style>
  </head>
  <body>
    <ul>
      <li><a href="#popup1" class="popupLink">打开弹出层1</a></li>
      <li><a href="#popup2" class="popupLink">打开弹出层2</a></li>
      <li><a href="#popup3" class="popupLink">打开弹出层3</a></li>
    </ul>

    <div id="popup1" class="popup">
      <h2>弹出层1</h2>
      <p>这里是弹出层的内容</p>
      <button class="hideBtn">隐藏</button>
    </div>

    <div id="popup2" class="popup">
      <h2>弹出层2</h2>
      <p>这里是弹出层的内容</p>
      <button class="hideBtn">隐藏</button>
    </div>

    <div id="popup3" class="popup">
      <h2>弹出层3</h2>
      <p>这里是弹出层的内容</p>
      <button class="hideBtn">隐藏</button>
    </div>

    <script type="text/javascript">
      //获取所有的弹出层链接和弹出层
      var popupLinks = document.querySelectorAll(".popupLink");
      var popups = document.querySelectorAll(".popup");
      var hideBtns = document.querySelectorAll(".hideBtn");

      //为弹出层链接绑定点击事件
      for (var i = 0; i < popupLinks.length; i++) {
        popupLinks[i].onclick = function() {
          var popupId = this.getAttribute("href");
          document.querySelector(popupId).style.display = "block";
          return false;
        }
      }

      //为弹出层的“隐藏”按钮绑定点击事件
      for (var i = 0; i < hideBtns.length; i++) {
        hideBtns[i].onclick = function() {
          this.parentNode.style.display = "none";
        }
      }

      //为除了弹出层以外的其他区域绑定点击事件，当用户点击时隐藏弹出层
      document.onclick = function(e) {
        for (var i = 0; i < popups.length; i++) {
          if (popups[i].style.display === "block" && e.target !== popupLinks[i]) {
            popups[i].style.display = "none";
          }
        }
      }
    </script>
  </body>
</html>

以上就是实现JS弹出层的显示与隐藏的完整攻略。无论是单个弹出层还是多个弹出层，我们都可以通过简单的HTML、CSS和JavaScript代码来实现。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS弹出层的显示与隐藏示例代码 - Python技术站