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
– ROY Finley, Commented Jan 31, 2013 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.
– Kim K., Commented Jan 31, 2013 at 17:57
Can I raise the z-index for the dialog? and could that resolve the problem? — Kim K.
– Kim K., Commented Jan 31, 2013 at 18:02
One true fact of code writing..... ANYTHING is possible. give it a try and see.... Happy coding:) — ROY Finley
– ROY Finley, Commented Jan 31, 2013 at 18:12
I have tried to give the dialog div a high z-index but no change at all — Kim K.
– Kim K., Commented Jan 31, 2013 at 18:20

Viral Patel · Accepted Answer · 2013-02-09 11:20:18Z

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 9, 2013 at 11:20

answered Feb 9, 2013 at 10:13

Viral Patel

2962 silver badges3 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

orjan Over a year ago

Do you have a link to the bug?

Stuart Over a year ago

You may to add the style rule in this way... .ui-dialog { z-index: 101 !important; }

Karsten Grau Rasmussen · Accepted Answer · 2013-02-01 12:05:45Z

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 1, 2013 at 12:05

Karsten Grau Rasmussen

611 bronze badge

3 Comments

Kim K. Over a year ago

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

Karsten Grau Rasmussen Over a year ago

hmm. that's weird, it works just find for me even with 1.10.0.

Kim K. Over a year ago

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

orjan · Accepted Answer · 2013-05-09 12:23:40Z

4

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>

answered May 9, 2013 at 12:23

orjan

1,4821 gold badge19 silver badges35 bronze badges

Comments

Marcus Vinicius · Accepted Answer · 2013-02-01 11:34:48Z

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 1, 2013 at 11:34

Marcus Vinicius

1,8981 gold badge20 silver badges36 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:34:35Z

0

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

edited May 23, 2017 at 12:34

CommunityBot

11 silver badge

answered Jan 31, 2013 at 22:38

TT77

1842 silver badges3 bronze badges

1 Comment

Kim K. Over a year ago

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

jats · Accepted Answer · 2013-05-27 06:40:06Z

0

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.

answered May 27, 2013 at 6:40

jats

851 gold badge1 silver badge12 bronze badges

1 Comment

Andreas Krohn Over a year ago

Isn't that the answer from orjan above? You should give him the credit.

Andre Morata · Accepted Answer · 2013-11-23 15:42:24Z

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, 2013 at 15:42

Andre Morata

6416 silver badges6 bronze badges

Comments

Ross · Accepted Answer · 2014-03-04 15:07:17Z

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 4, 2014 at 15:07

Ross

3332 silver badges8 bronze badges

Collectives™ on Stack Overflow

Jquery UI dialog box, is grayed out too

8 Answers 8

2 Comments

3 Comments

Comments

Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

2 Comments

3 Comments

Comments

Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related