how can I create overlay div to fit the rest of the screen

Question

How can create overlay div with black background lets say, I have an anchor that fires div to popup, here is the anchor:

<a href="#" title="Open online form" id="open">Suggest</a>

Here is the css of centered div :

.centered
{
  width:55%;
  position:fixed;
  left:18%;
  height:200px;
  border:2px solid red;
  display:none;
}

 $("#open").live('click', function(){
            var divTop = 75 + $(window).scrollTop();    // places the popup 75px from the top       
         $('.centered').css({'top':divTop, 'display':'block', 'z-index':'5005'});
            });

I used jquery ui modal for these things before, but now some of my scripts stop working when I use it, and plus 50kb+ is something I don't need on my website at the moment, already loading for app 6 sec. Any suggestions ?

Answer 1

Have you considered blockUI for this? 8k before GZip, this is all it does, shouldn't give you any trouble with other scripts. The main benefit for me is it takes care of things like IE6 dropdowns bleeding through, all the little annoyances, etc.

Your case would be:

$.blockUI({ message: $('.centered') }); //show
$.unblockUI(); //hide