Modal jQuery dialog hidden behind overlay in ASP.net

Question

I am developing some Jquery dialog and found the dialog was hidden when I set Modal: true. When setting Modal: false, I found everything works as expected. Hope someone can help me.

<asp:Button ID="btnOpendialog" runat="server" Text="Button" ClientIDMode="Static" />

<div id="dialog">

<h1>Test</h1>
    <asp:Button ID="btnClickfromDialog" runat="server" Text="Button" />

</div>

$(function () {
    $("#btnOpendialog").click(function (e) {
        $("#dialog").dialog("open");
        return false;
    });

    $("#dialog").dialog({
        height: 200,
        modal: true,
        autoOpen: false,
        open: function () {
            $(this).parent().appendTo($("form:first"));
        }                              
    });
});

Answer 1

I fixed it. There aren't many people who're complaining about this issue. Is it just me? Anyway, here is how I fixed it. Quite simple when you know how.

.ui-widget-overlay
{
        z-index: 0;   
}

Answer 2

I tried the accepted answer and it appeared to work in some situations, but not others. Using the same idea, this is the code I came up with this code...

.ui-dialog { z-index: 9999 !important; }

...which is based on the fact that the z-index of .ui-widget-overlay is 9998.

Additionally, to fix the problem where the overlay does not cover the full height of your page (as .ui-widget-overlay only has a height of 1000%), I came up with this:

.ui-widget-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; }

Answer 3

You need to stop using appendTo like this and use the new dialog option "appendTo"

like this:

$( ".selector" ).dialog({ appendTo: "#someElem" });

Taken from jquery-ui documentation http://api.jqueryui.com/dialog/#option-appendTo

Answer 4

All I need was z-index:1 applied to ui-dialog. There was no z-index I could apply to ui-widget-overlay to make this work.

I'm doing this in Wordpress including the 'jquery', 'jquery-ui-core', 'jquery-ui-dialog' scripts. Here's my relevant css:

.ui-widget-overlay {    
    position: absolute; 
    top: 0; 
    left: 0; 
    width:100%;
    height:100%;
    background: #aaaaaa;
    opacity: 0.3;  
}    

.ui-dialog {    
    background-color: #FFFFFF;    
    overflow: hidden;   
    z-index:1;
}