js控制div弹出层实现方法-前端开发

JS控制div弹出层实现方法有很多种方法，以下是其中一种比较常见的方法：

"JS控制div弹出层实现方法"有很多种方法，以下是其中一种比较常见的方法：

1. 首先创建一个html文件，并添加CSS样式

CSS样式的作用是设置弹出层的样式和位置，实现以上功能：

.popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  box-shadow: 0px 0px 5px #cccccc;
  z-index: 1000;
}
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 900;
}

这里创建了两个class，即.popup和.overlay，分别用来设置弹出层和背景的样式。

2. 在html中添加弹出层的内容和按钮等

下面是html文件的代码，包含了按钮和弹出层内容的设置：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JS 控制 div 弹出层实现方法</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <button id="showPopup">显示弹出层</button>
  <div class="overlay" id="overlay"></div>
  <div class="popup" id="popup">
    <h2>弹出层标题</h2>
    <p>这是弹出层的内容</p>
    <button id="closePopup">关闭弹出层</button>
  </div>

  <script src="script.js"></script>
</body>
</html>

3. 在JS文件中添加事件监听器

下面是js文件的代码：

// 获取按钮和弹出框
var showBtn = document.getElementById("showPopup");
var popup = document.getElementById("popup");
var closeBtn = document.getElementById("closePopup");
var overlay = document.getElementById("overlay");

// 点击"显示弹出层"按钮显示弹出层和背景
showBtn.addEventListener("click", function() {
  popup.style.display = "block";
  overlay.style.display = "block";
});

// 点击"关闭弹出层"按钮关闭弹出层和背景
closeBtn.addEventListener("click", function() {
  popup.style.display = "none";
  overlay.style.display = "none";
});

// 点击背景也会关闭弹出层和背景
overlay.addEventListener("click", function() {
  popup.style.display = "none";
  overlay.style.display = "none";
});

这里使用了事件监听器 addEventListener() 监听 click 事件，并调用 popup.style.display 和 overlay.style.display 来控制弹出层和背景的显示和隐藏。实现了点击按钮和背景都可以显示和关闭弹出层的功能。

示例1：js控制div实现仿alert提示框

下面我们可以使用以上方法实现一个仿alert提示框的功能，具体如下代码所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JS 控制 div 弹出层实现仿alert提示框</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <button id="showAlert">显示提示框</button>
  <div class="overlay" id="alertOverlay"></div>
  <div class="popup alert" id="alertBox">
    <h2>提示</h2>
    <p id="alertMsg">这是提示框的消息</p>
    <button id="alertOK">确认</button>
  </div>

  <script src="script.js"></script>
  <script>
    document.getElementById("alertOK").addEventListener("click", function() {
      hideAlert();
    });

    function showAlert(msg) {
      document.getElementById("alertMsg").innerHTML = msg;
      document.getElementById("alertBox").style.display = "block";
      document.getElementById("alertOverlay").style.display = "block";
    }

    function hideAlert() {
      document.getElementById("alertBox").style.display = "none";
      document.getElementById("alertOverlay").style.display = "none";
    }
  </script>
</body>
</html>

在js文件中，新增 showAlert() 和 hideAlert() 函数，分别用来显示和隐藏提示框。同时，可以在 showAlert() 函数中动态设置提示框的消息内容。在html文件中，新增了一个 "alert" 的 class，来设置仿alert提示框的特定样式。示例1的弹出层添加了一个确认按钮，点击该按钮可以关闭提示框，实现了仿alert提示框的功能。

示例2：js控制div实现登录弹出层

另一个例子是用_js控制div实现登录弹出层_。实现方式与以上过程基本相同，可以通过以下代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JS 控制 div 弹出层实现登录弹出层</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <button id="showLogin">登录</button>
  <div class="overlay" id="loginOverlay"></div>
  <div class="popup login" id="loginBox">
    <h2>用户登录</h2>
    <form>
      <label for="username">用户名：</label>
      <input type="text" id="username" name="username">
      <br>
      <label for="password">密码：</label>
      <input type="password" id="password" name="password">
      <br><br>
      <button type="submit">登录</button>
    </form>
    <button id="closeLogin">取消</button>
  </div>

  <script src="script.js"></script>
  <script>
    document.querySelector("form").addEventListener("submit", function(e) {
      e.preventDefault();
      var username = document.getElementById("username").value;
      alert("欢迎 " + username + " 登录！");
      hideLogin();
    });

    document.getElementById("closeLogin").addEventListener("click", function() {
      hideLogin();
    });

    function showLogin() {
      document.getElementById("loginBox").style.display = "block";
      document.getElementById("loginOverlay").style.display = "block";
    }

    function hideLogin() {
      document.getElementById("loginBox").style.display = "none";
      document.getElementById("loginOverlay").style.display = "none";
    }

    document.getElementById("showLogin").addEventListener("click", function() {
      showLogin();
    });
  </script>
</body>
</html>

在js文件中，新增 showLogin() 和 hideLogin() 函数，分别用来显示和隐藏登录弹出层。同时，通过监听登录表单的 submit 事件实现表单的登录功能。在html文件中，我们通过 form 元素实现了登录表单的样式，并动态设置了 "login" 的 class，来设置登录弹出层的样式。同时添加了一个 "取消" 按钮，来实现登录弹出层的关闭功能。

总结
通过上述两个示例我们可以看出，JS控制DIV弹出层是有多种实现方式的，本文仅提供了其中一种。希望本文对您有所帮助。