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"));
        }                              
    });
});

Richards

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;   
}

Richards

Nice one! Worked for me, although I had to use !Important to make sure it took precedence. – Contredanse

for other people coming to this page, as @Eddie R mentioned, you should use the new API $( ".selector" ).dialog({ appendTo: "#someElem" }); – Cowl

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; }

Philps

Both overrides worked for me across browsers - thanks ban-geoengineering. – Devolution

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

Reichenberg

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;
}

Amphioxus

Answer 5

Can you create a jsFiddle to recreate this issue outside your environment? If not, here are some ideas off the top of my head:

Put your javascript inside of a document ready block, like so:

$(document).ready(function() {
// Your javascript here...
});

Change btnOpendialog to be a non-ASP.NET server control. Since all it does is open the jquery dialog, it has no need to be a server control. Change it to this:

<input type="button" id="btnOpendialog" value="Button" />

Wasting

$(function () { is same as $(document).ready Clear .. it wouldn't make a difference to change the button anyhow I need asp.net buttons. Thanks for your help. I fixed it already. – Richards