jquery ui - Nested Dialog z-index issues

Question

I got a dialog which showing a table, and when i click on a "Delete" button, I will pop up another dialog to ask for confirmation. Currently this works fine at the first time, but if I click the "Delete" button for the second time, the delete dialog is shown behind the first table dialog, so it is actually invisible to the user.

I tried to set the z-index for both dialog, but I don't know why it is only working at the first time

Following is the sample of my script:

   // The 1st dialog
   var $detaildialog = $('#tableplaceholder').dialog({
        autoOpen: false,
        modal: true,
        width: '800',
        height: 'auto'

    });
   // Some steps to set the url.. then open the dialog
   $detaildialog.load(url, function () {

            $('#loading').hide();
            $detaildialog.dialog('open');
        });

   // Then, when delete action is called, open the second dialog
   fnOnDeleting: function (tr, id, fnDeleteRow) {
            var $dialog = $('#checkdeletedialog').dialog({
                autoOpen: false,
                modal: true,
                title: 'Delete Confirmation',
                zIndex: 90000
            });
            $dialog.dialog('open');
        }

Anything I am doing wrong here?

Appreciate any help.. thanks :)

tobias86 · Accepted Answer · 2011-12-02 08:55:36Z

6

Set the "stack" property of the second dialog to true.

function (tr, id, fnDeleteRow) {
        var $dialog = $('#checkdeletedialog').dialog({
            autoOpen: false,
            modal: true,
            stack: true,
            title: 'Delete Confirmation'
        });
        $dialog.dialog('open');
    }

More information here.

EDIT: We've also had issues with modal dialogs behaving oddly after opening once. We found that 'destroying' the dialog when it closes fixes the issue, e.g.

var $dialog = $('#checkdeletedialog').dialog({
        autoOpen: false,
        modal: true,
        stack: true,
        title: 'Delete Confirmation',
        close: function() {
            $(this).dialog('destroy');
        }
    });

edited Dec 2, 2011 at 8:55

answered Dec 2, 2011 at 8:31

tobias86

5,0291 gold badge23 silver badges31 bronze badges

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

6 Comments

shennyL Over a year ago

Hi, i tried and its not working.. any other idea? Thanks a lot

tobias86 Over a year ago

Try not specifying the z-index in conjunction with the stack: true option

tobias86 Over a year ago

Also consider 'destroying' the dialog once you're done with it. See edited answer.

shennyL Over a year ago

Hi, the 'destroy' does the trick! But I do need to include the destroy in every place wherever possible, cause if I only include it in the close function, the close triggered by submit is not calling the destroy... anyway, really thanks a lot!

Dan Torrey Over a year ago

Thanks so much!! modal: true, stack: true did the trick for me.

|

Collectives™ on Stack Overflow

jquery ui - Nested Dialog z-index issues

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related