web文档body太长，如果让其中点击按钮弹出一个小div 在浏览器可视窗口 居中？？

Question

web文档body太长，大约是浏览器可视窗口高度的3.2倍左右，当页面中scroll 滚动到中间或末尾，或页面任何位置时，点击里面中的子按钮，弹出一个小div（absolute 定位），显示在浏览器窗口的中间位置。 网上资料基本都是在网页高度不超过浏览器可视窗口高度实现的，所以都不能实现我的要求。 而我要的不是在body文档流中居中， 而是不管web文档流多高， 其子弹出的div（absolute 定位）在浏览器窗口可视区的中央， （必须是浏览器可视区域）的居中

请哪位大学指点迷津， 用js或css实现 都行

Answer 1

该回答引用ChatGPT辅助答疑，若有帮助，还请题主采纳。

---

要实现点击按钮弹出的小div在浏览器可视窗口居中显示，不管web文档流有多高，可以使用以下的方法。

HTML部分：

<button onclick="showPopup()">点击按钮</button>
<div id="popup" class="popup">
  <div class="popup-content">
    这是弹出的内容
  </div>
</div>

CSS部分：

.popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #f1f1f1;
  padding: 20px;
  border: 1px solid #ccc;
}

.popup-content {
  text-align: center;
}

JavaScript部分：

function showPopup() {
  var popup = document.getElementById("popup");
  popup.style.display = "flex";
}

window.addEventListener("scroll", function() {
  var popup = document.getElementById("popup");
  popup.style.display = "none";
});

在上面的示例中，点击按钮时会触发showPopup()函数，该函数将弹出框的display属性设置为"flex"，使其显示出来。然后在CSS中，给弹出框设置position: fixed；top: 50%；left: 50%；并使用transform属性将其居中显示在浏览器可视窗口中间。需要注意的是，通过 JavaScript 添加了滚动事件监听器(window.addEventListener("scroll"))，当页面发生滚动时，弹出框将被隐藏。

希望以上代码能满足您的需求！如果您有任何问题，请随时提问。