jqueryui dialog to gray out screen

Question

I'm using the jQueryUI (extension?) and have a simple overlay on a page. Here's what I have so far

Anyway is there any built in way to grey out the screen when the dialog is open? I know you can do this by appending another div to the page, I want to know if jQueryUI has something like this built in.

I couldn't find anything like this on the API, maybe I missed something.

Answer 1

You can specify options for the dialog using an object literal. One of these options is modal which will place an overlay on the screen behind the dialog. This overlay will prevent the user from clicking behind the dialog.

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

Example: http://jsfiddle.net/vhA2w/1/

Checkout all of the available options at: http://jqueryui.com/demos/dialog/

Answer 2

This jsfiddle should work for you

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