JS popup element to dim surrounding site

jquery html dhtml javascript
Matt picture Matt · Jul 1, 2010 · Viewed 9.1k times · Source

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

sje397 picture sje397 · Jul 1, 2010

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

Related questions

jQuery document.createElement equivalent?

I'm refactoring some old JavaScript code and there's a lot of DOM manipulation going on. var d = document; var odv = d.createElement("div"); odv.style.display = "none"; this.OuterDiv = odv; var t = d.createElement("table"); t.cellSpacing = 0; t.className = "text"; …

Read More
jQuery: how to change tag name?

jQuery: how to change tag name? For example: <tr> $1 </tr> I need <div> $1 </div> Yes, I can Create DOM element <div> Copy tr content to div Remove tr from dom …

Read More
code to set a select box option value as an object

in an html page i have got, i have a select box like this with values. <select onChange="return filler(this.value);"> <option value="{'name':'rajiv',age:'40'}">a</option> <option value="{…

Read More