如何创建一个与页面滚动的中心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
}

要"关闭"它,设置display为none通过JS.例如:

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