JS popup element to dim surrounding site

Question

I'm not really sure how to describe what I want to do, but I'm sure I've seen it on many sites before.

Basically, when someone clicks a link, it should show an element which contains some text and dims down the rest of the site so that the users focus is directed towards the element. It shouldn't let users click in the dimmed area either, because the notification needs confirmation before it will go.

I'm using jQuery on my site, so I'm happy to use that if it'd be easier.

Answer 1

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

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

or you can try Boxy Lightbox plugin.

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

Answer 2

It's often called a "lightbox". I use a plugin called nyroModal which is really flexible and has wide browser support.

Answer 3

jQuery UI's dialog widget will use a 'semi-transparent' background when opened in 'modal' mode.

html:

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

javascript:

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

Demo here

Answer 4

My personal favorite is shadowbox.js

Answer 5

add an extra div to cover the content. The mask should be placed on top of all elements except the control that is to be popped up. Using the jquery code below, this functionality can be achieved. Assuming the newly added control(div) is having 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 6

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

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

Which is nice.

Answer 7

I'll go ahead and throw my two cents in on this one as well. My jQuery modal plugin of choice is jqModal. Worth checking out as well

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