javascript - 如何创建一个随页面滚动的中心div？

Question

我有一个网站，我想在该网站上方放置一个 DIV，其中包含用于输入电子邮件的字段和“订阅”按钮。它应该像我们都喜欢的广告一样工作。所以这个 div 应该总是在屏幕的中央，它应该在网站的“上方”并且在用户浏览页面时滚动。当用户点击 X 时，它应该关闭。

如何做到这一点？

Answer 1

参见 CSS position:fixed和 z-index特性。要水平和垂直居中元素，请为其指定固定尺寸，将其定位在 50%、50%，然后使用负边距。例如:

#annoying-floater {
  z-index:10;
  position:fixed;
  top:50%; left:50%;
  width:640px; height:480px;
  margin-left:-320px; margin-top:-240px
}

要“关闭”它，请通过 JS 将 display 设置为 none。例如:

window.onload=function(){
  document.getElementById('annoying-floater-closer').onclick = function(){
    document.getElementById('annoying-floater').style.display='none';
  }
}