Jquery UI dialog box, is grayed out too

Question

I'm using a jquery UI dialog to modify a data row in a ASP.NET website, When opening the dialog I append the dialog to the underlaying form, this gives me the possibility of using postbacks. $('#' + id).parent().appendTo($("form"));

But when I set the dialog property modal: true Not just the background is grayed out, the dialog is also gray and inaccessible.

If I remove the $('#' + id).parent().appendTo($("form")); it works like supposed to but then i can't use postbacks.

Am I doing something wrong or do i miss a point to get this to work?

Javascript in top of .aspx

<script type="text/javascript">
    $(document).ready(function () {

        $('#workDialog').dialog({
            autoOpen: false,
            draggable: true,
            resizable: false,
            width: 800,
            height: "auto",
            modal: true
        });
    });

    function showDialog(id) {
        $('#' + id).parent().appendTo($("form"));
        $('#' + id).dialog("open");
    }

    function closeModalDiv(id) {
        $('#' + id).dialog("close");
    }
</script>

The div containing the dialog

<div id="workDialog" title="Basic dialog">
    <asp:UpdatePanel ID="upWorkDialog" runat="server" UpdateMode="Conditional">  <ContentTemplate>
        <table id="Table1" class="item">
        <tr>
            ...
        </tr>
        <tr>
            <td><asp:TextBox ID="txt...></asp:TextBox></td>
            <td><asp:TextBox ID="txt...></asp:TextBox></td>
            <td><asp:TextBox ID="txt...></asp:TextBox></td>
            <td><asp:TextBox ID="txt...></asp:TextBox></td>
        </tr>
        </table>
        <asp:Label ID="lblWorkEditError" runat="server" Text=""></asp:Label>

        <asp:Button ID="btnSave" runat="server" Text="Gem" OnClick="btnSave_Click" />
        <asp:Button ID="btnCancel" runat="server" Text="Annuller" OnClientClick="javascript:closeModalDiv('workDialog');" />
    </ContentTemplate></asp:UpdatePanel>
</div>

The Modal mask is z-indexed to cover the screen, thus anything you append to the form would be covered also. — ROY Finley, Jan 31 '13 at 17:49
Yes, but I have seen this done before with adding the dialog to the underlying form where the dialog is not grayed out. So it should work. — Kim K., Jan 31 '13 at 17:57
Can I raise the z-index for the dialog? and could that resolve the problem? — Kim K., Jan 31 '13 at 18:02
One true fact of code writing..... **ANYTHING** is possible. give it a try and see.... Happy coding:) — ROY Finley, Jan 31 '13 at 18:12
I have tried to give the dialog div a high `z-index` but no change at all — Kim K., Jan 31 '13 at 18:20
Have you tried `$('#' + id).parent().appendTo($("form:first"));`? Note the `:first` pseudo-class. — Marcus Vinicius, Jan 31 '13 at 20:32
yep, I have tried that it selects the same form so no difference. — Kim K., Jan 31 '13 at 22:12
What jQuery UI version are you using? It looks like after version 1.10.0, the modal workaround doesn't work anymore. — Marcus Vinicius, Feb 01 '13 at 00:01
@Marcus Okay that sounds interesting i'm using dowloadable version 1.10 [http://code.jquery.com/ui/1.10.0/jquery-ui.js](http://code.jquery.com/ui/1.10.0/jquery-ui.js). I will try to downgrade the jquery UI. — Kim K., Feb 01 '13 at 08:51
Thank you @Marcus, by downgrading to version 1.9.2 of Jquery-UI the dialog box is now working as expected, Feel free to post the solution as an answer — Kim K., Feb 01 '13 at 09:20

Viral Patel · Accepted Answer · 2013-02-09T11:20:18.923

28

This is a known bug in 1.10.0 and works fine in older versions but I SOLVED it by changing the z-index for the ui-dialog style

add following style in your stylesheet or on page

.ui-dialog
{
    z-index: 101;
}

OR find .ui-dialog class in jquery-ui-1.10.0 css and add "z-index: 101;" style rule

now reload page and IT WORKS...

edited Feb 09 '13 at 11:20

answered Feb 09 '13 at 10:13

Viral Patel

296
2
3

Do you have a link to the bug? – orjan May 09 '13 at 11:54
1

You may to add the style rule in this way... .ui-dialog { z-index: 101 !important; } – Stuart Dec 17 '13 at 09:36

score 6 · Answer 2 · answered Feb 01 '13 at 12:05

6

This is a known bug in 1.10.0. I solved it by changing the z-index for the overlay.

$('#workDialog').dialog({
            modal: true,
            width: 400,
            height: 200,
            appendTo: $("form:first")
        });
        var dz = $(".ui-front").css("z-index")
        $(".ui-widget-overlay").css({ "z-index": dz - 1 });
        $(".ui-widget-overlay").appendTo($("form:first"));

answered Feb 01 '13 at 12:05

Karsten Grau Rasmussen

61
1

Thanks for the answer @Karsten but unfortunately it does not work in my case. I have added your modifications and removed the `$('#' + id).parent().appendTo($("form:first"));` from the showDialog function, but the dialog is still gray when using 1.10.0 – Kim K. Feb 01 '13 at 12:48
hmm. that's weird, it works just find for me even with 1.10.0. – Karsten Grau Rasmussen Feb 01 '13 at 14:34
Your answer seems to be the right solution, but when I can't make it work I have to go with Marcus answer for now. Thanks for the help – Kim K. Feb 01 '13 at 14:52

score 4 · Answer 3 · answered May 09 '13 at 12:23

It's not allowed to move the dialog after it's been created. I think the easiest and best fix is to move the appendTo to the initialization of the dialog.

<script type="text/javascript">
$(document).ready(function () {

    $('#workDialog').dialog({
        autoOpen: false,
        draggable: true,
        resizable: false,
        width: 800,
        height: "auto",
        modal: true,
    appendTo: "#aspnetForm" // moved append to where the dialog i created
    });
});

function showDialog(id) {
    $('#' + id).dialog("open");
}

function closeModalDiv(id) {
    $('#' + id).dialog("close");
}
</script>

score 1 · Answer 4 · answered Feb 01 '13 at 11:34

1

It looks like after version 1.10.0, the modal workaround doesn't work anymore. By downgrading the jQuery UI version to 1.9.2, it should work again.

answered Feb 01 '13 at 11:34

Marcus Vinicius

1,891
1
19
35

score 0 · Answer 5 · edited May 23 '17 at 12:34

I've tried and it should work. Could you try commenting out the line

 $('#' + id).parent().appendTo($("form"));

Modify where you initialize your dialog to take the object in a variable dlg2

var dlg2 = $("#dialog1").dialog({
    autoOpen: false,
    draggable: true,
    resizable: false,
    width: 800,
    height: "auto",
    modal: true,
    open: function (type, data) { $(this).parent().appendTo("form"); }
});

Add this line immediately after you initialize your dialog.

$(dlg2).parent().appendTo($("form"));

Do you have only one dialog? You could try initializing it in the dialog declaration adding the open code:

$("#dialog1").dialog({
    autoOpen: false,
    draggable: true,
    resizable: false,
    width: 800,
    height: "auto",
    modal: true,
    open: function (type, data) { $(this).parent().appendTo("form"); }
});

Link: jQuery UI Dialog with ASP.NET button postback

TT77 Yep I had already tried this and it appends the dialog to the form, it gave my the same result, As @Marcus pointed out there is something in version 1.10.0 that eliminates the workaround and downgrading seems to be the solution for the moment. But thanks for the help — Kim K., Feb 01 '13 at 09:17

score 0 · Answer 6 · answered May 27 '13 at 06:40

The below code show fix your problem, worked for me:

<script type="text/javascript">
    $(document).ready(function () {

        $('#workDialog').dialog({
            autoOpen: false,
            draggable: true,
            resizable: false,
            width: 800,
            height: "auto",
            modal: true,
            appendTo: "form"
        });
    });

    function showDialog(id) {
        $('#' + id).dialog("open");
    }

    function closeModalDiv(id) {
        $('#' + id).dialog("close");
    }
</script>

In jQuery UI v1.10 they added an appendTo property, which seems to do the same thing as calling .parent().appendTo($("form")). The dialog appears on top of the grayed background. And Post back does work.

Isn't that the answer from orjan above? You should give him the credit. — Andreas Krohn, Feb 23 '15 at 14:37

score 0 · Answer 7 · answered Nov 23 '13 at 15:42

0

on the second line in the showDialog function, add a css set for z-index. Should look like this:

function showDialog(id) {
    $('#' + id).parent().appendTo($("form"));
    $('#' + id).dialog("open").css({"z-index":"101"});
}

answered Nov 23 '13 at 15:42

Andre Morata

641
6
6

score 0 · Answer 8 · answered Mar 04 '14 at 15:07

0

Karsten's answer worked for me with a minor tweak. I have to move $('#workDialog').dialog... after $(".ui-widget-overlay").appendTo($("form:first"));

answered Mar 04 '14 at 15:07

Ross

183
1
6

Jquery UI dialog box, is grayed out too

8 Answers8