Как я могу создать оверлей Div, чтобы соответствовать остальной части экрана

Question

Как создать оверлейный div с черным фоном, скажем, у меня есть якорь, который запускает div для всплывающего окна, вот якорь:

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

Вот CSS центрированного 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'});
            });

Раньше я использовал jquery ui модальный для этих вещей, но теперь некоторые из моих скриптов перестают работать, когда я его использую, и плюс 50kb + - это то, что мне сейчас не нужно на моем сайте, уже загружается для приложения 6 секунд. Есть предложения?

Answer 1

Рассматривали ли вы blockUI для этого? 8k до GZip , это все, что он делает, не должно создавать проблем с другими скриптами. Основное преимущество для меня - это забота о таких вещах, как выпадающие списки IE6, все мелкие неприятности и т. Д.

Ваш случай будет:

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