jQuery UI dialog z-index problems

Question

I am trying to get a dialog to appear over a dialog in jQuery. The problem that i'm having is when the top dialog is opened the z-indexes are wrong so the div with the class ui-widget-overlay appears behind the first dialog instead of behind the second dialog.

Here is a breakdown of the z-indexes:

I will refer to the first dialog opened as dialog#1 and the one opened on top of this as dialog#2 and the ui-widget-overlays as ui-widget-overlay#1 and ui-widget-overlay#2 respectively.

dialog#1 is opened and its z-index is set as 1 with ui-widget-overlay#1 z-index set as 0

dialog#2 is opened and its z-index is set as 1 with ui-widget-overlay#2 z-index set as 0

Then when i close dialog#2 and re open it, this time dialog#2 z-index is correctly set as 2 and ui-widget-overlay#2 is correctly set as 1

Does anyone have any idea why this is happening, is there a jquery-ui setting I am missing to tell it to increment the z-indexes for subsequent dialogs?

Edit: I also wanted to point out that i have set stack:true in the dialog options and it has made no difference.

SamBremner · Accepted Answer · 2017-10-13 16:19:10Z

3

I have had to use a bit of a hack to get this working as intended.

Basically i added an event when the modal is created so the dialog initialisation is something like:

  dialogWindow.dialog({
      modal: true,
      create: function(event, ui) {
          dialogWindow.parent('.ui-dialog').css('zIndex', 2)
              .nextAll('.ui-widget-overlay').css('zIndex', 1);
      }
    });

Thanks to the below post for giving me this answer.

How to fix the zIndex issue with jQuery Dialog UI

answered Oct 13, 2017 at 16:19

SamBremner

8233 gold badges12 silver badges24 bronze badges

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

Collectives™ on Stack Overflow

jQuery UI dialog z-index problems

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related