Question

I have a website and I would like to put a DIV above this website with field to enter e-mail and button “Subscribe”. It should work like this advertisements that we all like. So this div should be always on the center of the screen, and it should be “above” the website and scroll while user is browsing though the page. When user clicks X it should close.

How to do this?

Answer 1

See the CSS position:fixed and z-index properties. To center the item horizontally and vertically, give it fixed dimensions, position it at 50%,50%, and then use negative margins. For example:

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

To ‘close’ it, set the display to none via JS. For example:

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