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

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