Сделать прозрачный оверлей на странице Jquery

Question

Эй, как я могу сделать так, чтобы в целом был только полупрозрачный цвет, покрывающий всю страницу, кроме 1 div (который будет сообщением)

В основном фон загрузки страниц покрывается полупрозрачной чернотой, но определенный div (в данном случае это окно сообщения) остается нормальным.

Спасибо

Answer 1

Вы можете попробовать blockUI http://malsup.com/jquery/block/

Плагин jQuery BlockUI позволяет имитировать синхронное поведение при использовании AJAX без блокировки браузера ^[1] . Когда активировано, это предотвратит активность пользователя со страницей (или частью страницы), пока это не будет деактивировано. BlockUI добавляет элементы в DOM, чтобы придать ему вид и поведение, блокирующее взаимодействие с пользователем ...

[1] Использование объекта XMLHttpRequest в синхронном режиме приводит к блокировке всего браузера до завершения удаленного вызова. Обычно это нежелательное поведение.

Answer 2

Сделайте что-то вроде этого:

HTML

  <div id="lightbox_background"> 
    <div id="lightbox_container"> 
      <div id="lightbox_header"> 
        <span class="close"><a href="javascript:void(0);" onclick="activity_feed_close()">close</a> <a href="javascript:void(0);" onclick="activity_feed_close()"><img src="http://design.vitalbmx.com/images/x_button.gif" /></a></span> 
      </div> 
      <div id="lightbox_content"> 
        <p>Some text</p>
      </div> 
    </div> 
  </div> 

CSS

<style type="text/css">
div#lightbox_background { 
    display:none; 
    position:fixed; 
    top:0; 
    left:0;
    height:100%; 
    width:100%; 
    background: transparent url(http://design.vitalbmx.com/images/transp_30.png) repeat; z-index:1100; 
} 
div#lightbox_container { 
    background: #f6f6f6 url(http://design.vitalbmx.com/images/lb_container_bg.gif) right top repeat-y; 
    margin:16px 32px; 
} 
div#lightbox_container div#lightbox_header { 
    padding:5px 5px 0; text-align:right; 
} 
div#lightbox_container div#lightbox_content { 
    width:100%; 
    min-height:500px; 
}
</style>​ 

Answer 3

Fancybox делает это. Если он уже делает то, что вы хотите - используйте его. Если нет, то посмотрите исходный код и посмотрите, как он это делает.

http://fancybox.net/