Question

I am trying to create a mask (modal) on my whole website and for this i tried :

css

 #mask 
{
  position:absolute;
  z-index:9000;
  background-color:#000;
  display:none;
}

js

   $('body').append(' <div id="mask"></div> ');
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();

    $('#mask').css({ 'width': maskWidth, 'height': maskHeight, top: 0, opacity: 1 });

it works fine, but the mask is only on the visible part of my website, when i scrolls down there is no mask.Can anybody tell me the solution for this?

Answer 1

Use position:fixed to make it available when you scroll.

#mask 
{
  position:fixed;
  z-index:9000;
  background-color:#000;
  display:none;
}