JS+CSS实现带关闭按钮DIV弹出窗口的方法

在JavaScript和CSS中实现一个带关闭按钮的div弹出窗口，你可以这样做：

1. HTML部分：

<div id="popup" class="modal">
  <div class="content">
    <p>这是一个弹出窗口的内容</p>
    <button class="close-btn">关闭</button>
  </div>
</div>

这里我们创建了一个`div`元素作为弹出窗口，并添加了一个关闭按钮。

2. CSS部分 (通常放在外部文件如styles.css)：

.modal {
  display: none; /* 默认隐藏 */
  position: fixed; /* 定位到屏幕中央 */
  z-index: 1; /* 确保其在其他元素之上 */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* 避免滚动条 */
}

.content {
  background-color: rgba(0, 0, 0, 0.4); /* 背景半透明 */
  margin: 15% auto; /* 中心对齐内容 */
  padding: 20px;
  border-radius: 5px;
}

.close-btn {
  color: white;
  float: right;
  font-size: 28px;
  cursor: pointer;
}

3. JavaScript部分 (通常放在单独的js文件或直接在HTML内联):

function openPopup() {
  document.getElementById('popup').style.display = 'block';
}

function closePopup() {
  document.getElementById('popup').style.display = 'none';
}

// 给关闭按钮添加点击事件
document.querySelector('.close-btn').addEventListener('click', closePopup);

当你需要打开弹出窗口时，调用`openPopup()`函数；当用户点击关闭按钮时，`closePopup()`函数会被触发，隐藏弹出窗口。