How to get the overlay to display for jquery ui modal dialog?

Question

In the demo , the overlay is displayed correctly and all elements underneath the overlay are disabled:

<div class="ui-widget-overlay" style="width: 1920px; height: 650px; z-index: 1001;"></div>

However, when I use the code in my page, I can still access the other controls underneath the overlay. Any ideas on how to fix? I've been looking at the documentation and don't see much regarding overlay implementation.

My code:

$("<div title='" + title + "'><div class='ui-state-error ui-corner-all'><p><span class='ui-icon ui-icon-alert'></span><strong>Error: </strong>" + message + "</p></div></div>").dialog({
        resizable: false,
        modal: true,
        draggable: false
    });

Answer 1

You can set the zIndex on the dialog to a high number to get around this:

$("<div title='" + title + "'><div class='ui-state-error ui-corner-all'><p><span class='ui-icon ui-icon-alert'></span><strong>Error: </strong>" + message + "</p></div></div>").dialog({
    resizable: false,
    modal: true,
    zIndex: 100000,
    draggable: false
});