JS popup to reduce surrounding site

Question

I'm not sure how to describe what I want to do, but I'm sure I have seen this on many sites before.

Basically, when someone clicks on a link, they should show an element that contains some text and obscures the rest of the site so that users focus on that element. It should not allow users to click in the dimming area, because the notification needs confirmation before it goes.

I use jQuery on my site, so I am happy to use this if it is easier.

Answer 1

The jQuery UI dialog widget will use a "translucent" background when opened in modal mode.

HTML:

<div id='test' title='test'>Test!</div> 

JavaScript:

 $('#test').dialog({modal: true}); 

Demo here

Answer 2

add an extra div to cover the content. The mask should be placed on top of all elements except the control that should be displayed. Using the following jquery code, this function can be achieved. Assuming the added control (div) has id = 'mask'

 ......... var maskHeight = $(document).height(); var maskWidth = $(window).width(); //Set heigth and width to mask to fill up the whole screen $('#mask').css({'width':maskWidth,'height':maskHeight}); //transition effect $('#mask').fadeIn(1000); $('#mask').fadeTo("slow",0.5); ...... 

Answer 3

Take a look at this jQuery plugin, it does exactly what you want :)

http://dev7studios.com/demo/jquery-spotlight/

Which is nice.

Answer 4

I believe you want to use colorbox for it. (Lightbox).

http://colorpowered.com/colorbox/core/example1/index.html

or you can try the Boxy Lightbox plugin.

http://onehackoranother.com/projects/jquery/boxy/

Answer 5

My personal favorite is shadowbox.js

Answer 6

It is often called a lightbox. I use a plugin called nyroModal , which is really flexible and has broad browser support.

Answer 7

I will go ahead and throw my two cents on it. My jQuery module to select is jqModal. Worth checking out also

http://dev.iceburg.net/jquery/jqModal/