jQuery dialog that darkens the screen like the link dialog does here

Question

I like the look of the link dialog here. It darkens the screen and is probably modal (although I haven't tested that I just assume it is). What's a quick and easy way of darkening the screen like that witha jQuery UI Dialog?

Answer 1

The functionality you're talking about is provided by the WYSIWYM Markdown Editor

To do it with jQuery UI's dialog, try this:

$("#something").dialog({ modal: true; });

<div id="something" title="modal dialog">
<p>Add your stuff here.</p>
</div>

It's not exactly the same by default, but I think it's even prettier. ;)

http://ui.jquery.com/demos/dialog/#modal

Answer 2

One way to do it is to have a div at z-order > 1 which covers the whole screen at less than 100% opacity

HTML:

<div id="cover>&nbsp;</div>

CSS:

#cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
display: none;
background-color: #000000;
opacity: .7;
filter:progid:DXImageTransform.Microsoft.BasicImage(opacity=.7);

}

Then you can show the cover when you show your dialog, which needs to be at a yet higher z-index and remove the cover at the same time as your dialog:

Open:

$("#cover").show();
$("#fileupload").show( "slow" );

Close:

$("#fileupload").fadeOut( "slow" );
$("#cover").hide();