How do you make the browser go dim while showing a pop up

Question

I am quite often coming across sites that respond to a click on a What's This or a Gallery link by poping up a window in front of the original page, and making the original page go dim.

Is this a fancy AJAX trick?

Is it only likely to be supported in certain browsers?

And most importantly, how is it done?

Answer 1

This is nothing more than adding a <DIV> that covers the entire screen, and give it a black background. jQuery's UI library will handle this for you automatically.

http://jqueryui.com/demos/dialog/#modal

Or you can do it with basic HTML/CSS/jQuery like this:

div.modal-bg { 
  background:#000; 
  position:fixed; 
  top:0; left:0; 
  width:100%; 
  height:100%;
  z-index:10; 
}

<div class="modal-bg"></div>

$(function(){
  $("div.modal-bg").fadeTo("slow", .5);
});