CODEWITHSUNDEEP
jqueryjquery-ui-dialog
Jacob
Jacob

Reputation: 4031

Jquery dialogs order

I have two Jquery dialogs. The second one opens on top of the first one. How to keep the second one always on top ---> now when I click on the bottom one the top one hides under the first but stays opened.

I tried using highest z-index but it did't help. I don't want to use modal option on the dialog.

You can play around here: http://jsfiddle.net/2jYEP/2/

Upvotes: 0

Views: 384

Answers (1)

Gaurav
Gaurav

Reputation: 8487

You can use focus event of jquery ui dialog to keep the zIndex of first dialog to lowest. Here is the working fiddle:

Working fiddle

....
$("#div1").dialog({
         autoOpen: false,
         autoResize: true,
         resizable:false,
         dragable:false,
         focus: function(e, ui){
          $(this).parent(".ui-dialog").css("z-index", 0);
        }
     });
....

Whenever dialog gets focus the jquery ui code set its zIndex at top. So we just alter that behavior and set the first dialog zIndex to lowest on focus.

Upvotes: 1

Related Questions