jQuery UI 1.10: dialog and zIndex option

Question

I have to make an dialog to apear when an image onclick. The problem is that I have some realy big z-index there (500 for example) and the ui dialog is on the back of that elements.

Here is the page, you need to log in, user: "raducup" and pass:"1". Another problem is that when I click close ont the dialog, the object desapears.

This is the function I call when a image is click:

function openItem(obiect){
    $( obiect ).css('zIndex',9999);
    $( obiect ).dialog({
        dialogClass: "no-close",
        modal: true,
        draggable: true,
        overlay: "background-color: red; opacity: 0.5",
        buttons: [
            {
                text: "OK",
                click: function() {
                    $( this ).dialog( "close" );
                }
            }
        ]
    });
    reparaZindex();
}

Can you set the zIndex:'1000' option to your dialog definition and remove $( obiect ).css('zIndex',9999); ? — Irvin Dominin, Jun 04 '13 at 12:29

Irvin Dominin · Accepted Answer · 2014-03-13T12:19:04.237

119

You don't tell it, but you are using jQuery UI 1.10.

In jQuery UI 1.10 the zIndex option is removed:

Removed zIndex option

Similar to the stack option, the zIndex option is unnecessary with a proper stacking implementation. The z-index is defined in CSS and stacking is now controlled by ensuring the focused dialog is the last "stacking" element in its parent.

you have to use pure css to set the dialog "on the top":

.ui-dialog { z-index: 1000 !important ;}

you need the key !important to override the default styling of the element; this affects all your dialogs if you need to set it only for a dialog use the dialogClass option and style it.

If you need a modal dialog set the modal: true option see the docs:

If set to true, the dialog will have modal behavior; other items on the page will be disabled, i.e., cannot be interacted with. Modal dialogs create an overlay below the dialog but above other page elements.

You need to set the modal overlay with an higher z-index to do so use:

.ui-front { z-index: 1000 !important; }

for this element too.

edited Mar 13 '14 at 12:19

answered Jun 04 '13 at 12:50

Irvin Dominin

30,819
9
77
111

I did use the modal: true, but is modal just for elements with zindex 0, if it has zindx 500 the modal option is not working – raducup Jun 04 '13 at 12:56
Style .ui-front too as .ui-front { z-index:1000 !important; } because the overlay use z-index 100 by default – Irvin Dominin Jun 04 '13 at 12:59
2

+1 - I got caught out by the change to z-index in jQuery UI 1.10 too – Alnitak Jun 04 '13 at 14:50
Technically, the zIndex option is not deprecated, but outright removed. See http://bugs.jqueryui.com/ticket/8729. – Matthew Clark Mar 03 '14 at 18:01
1

For modal dialogs, I found the order to be important. Put .ui-front above .ui-dialog. If you don't the dialog uses the .ui-front z-index and ends up behind the overlay. – Ben Gripka Apr 14 '15 at 21:42
5

`.ui-dialog` should be `.ui-front + 1`, didn't work for me otherwise. So `.ui-front { z-index: 1000 !important; } .ui-dialog { z-index: 1001 !important; }` – Hirnhamster Jun 17 '15 at 12:13
In jQuery UI v1.9.2, instead of setting the z-index of `.ui-front`, you have to set the z-index of `.ui-widget-overlay`. Also, as @Hirnhamster mentions, the overlay needs to be at a z-index smaller than the widget, or else the overlay will overlap the actual dialog as well. – Doctor Blue Aug 12 '15 at 18:08

score 11 · Answer 2 · edited Jan 09 '15 at 15:29

11

You may want to try jQuery dialog method:

$( ".selector" ).dialog( "moveToTop" );

reference: http://api.jqueryui.com/dialog/#method-moveToTop

edited Jan 09 '15 at 15:29

Irvin Dominin

30,819
9
77
111

answered May 31 '14 at 02:51

Alain Gauthier

820
1
12
14

The only suggestion that worked for me! Thank you!11 – Dan Rayson Sep 29 '14 at 09:01
This! It was exactly what I needed for managing multiple stacked dialogs. I have click handlers in my dialogs that link to one another. This makes it simple to "recall" and existing dialog and move it to the front without having to muck around with z-indexes. Perfect! – Todd Hammer Feb 22 '18 at 13:50
1

doesn't seem to work in conjunction with leaflet maps, the dialog still opens behind the map – MikeT Sep 12 '18 at 10:07

Rajiv007 · Answer 3 · 2013-06-04T12:23:43.430

8

Add in your CSS:

 .ui-dialog { z-index: 1000 !important ;}

edited Jun 04 '13 at 12:23

answered Jun 04 '13 at 12:12

Rajiv007

1,126
7
13

Are you sure...i checked out the page and it did worked for me. Sorry if it didn't solved your problem. Maybe you can add !important. – Rajiv007 Jun 04 '13 at 12:23
Now it works with !important, but some elements are still able to be selected (I need a modal ui) – raducup Jun 04 '13 at 12:27
your content is using z-index:501...so you have to use more than that. – Rajiv007 Jun 04 '13 at 13:00
you may need to increase the z value, some other 3rd party tools have massive z indexes to force them on top of other controls – MikeT Sep 12 '18 at 10:12

score 5 · Answer 4 · edited May 23 '17 at 11:47

There are multiple suggestions here, but as far as I can see the jQuery UI guys have broken the dialogue control at present.

I say this because I include a dialogue on my page, and its semi transparent and the modal blanking div is behind some other elements. That can't be right!

In the end based on some other posts I developed this global solution, as an extension to the dialogue widget. It works for me but I'm not sure what it would do if I opened a dialogue from within a dialogue.

Basically it looks for the zIndex of everything else on the page and moves the .ui-widget-overlay to be one higher, and the dialogue itself to be one higher than that.

$.widget("ui.dialog", $.ui.dialog,
{
    open: function ()
    {
        var $dialog = $(this.element[0]);

        var maxZ = 0;
        $('*').each(function ()
        {
            var thisZ = $(this).css('zIndex');
            thisZ = (thisZ === 'auto' ? (Number(maxZ) + 1) : thisZ);
            if (thisZ > maxZ) maxZ = thisZ;
        });

        $(".ui-widget-overlay").css("zIndex", (maxZ + 1));
        $dialog.parent().css("zIndex", (maxZ + 2));

        return this._super();
    }
});

Thanks to the following, as this is where I got the info from of how to do this: https://stackoverflow.com/a/20942857

http://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/

score 0 · Answer 5 · answered Jun 04 '13 at 12:14

0

Add this before calling dialog

$( obiect ).css('zIndex',9999);

And remove

 zIndex: 700,

from dialog

answered Jun 04 '13 at 12:14

Rohan Kumar

40,431
11
76
106

Ok thanks, now how to make the object not to desapir after I click close (the element is an image) – raducup Jun 04 '13 at 12:16
Didn't work, I updated the code but still is not working, check the code up. – raducup Jun 04 '13 at 12:19

score 0 · Answer 6 · edited Sep 15 '15 at 10:09

0

moveToTop is the proper way.

z-Index is not correct. It works initially, but multiple dialogs will continue to float underneath the one you altered with z-index. No good.

edited Sep 15 '15 at 10:09

Irvin Dominin

30,819
9
77
111

answered Aug 15 '14 at 05:39

Carlos Saenz

1

IAM_AL_X · Answer 7 · 2018-03-18T05:28:30.360

To sandwich an my element between the modal screen and a dialog, I need to lift my element above the modal-screen, and then lift the dialog above my element.

I had a small success by doing the following after creating the dialog on element $dlg.

$dlg.closest('.ui-dialog').css('zIndex',adjustment);

Since each dialog has a different starting z-index (they incrementally get larger) I make adjustment a string with a boost value, like this:

const adjustment = "+=99";

However, jQuery just keeps increasing the zIndex value on the modal screen, so by the second dialog, the sandwich no longer worked. I gave up on ui-dialog "modal", made it "false", and just created my own modal. It imitates jQueryUI exactly. Here it is:

CoverAll = {};
CoverAll.modalDiv = null;

CoverAll.modalCloak = function(zIndex) {
  var div = CoverAll.modalDiv;
  if(!CoverAll.modalDiv) {
    div = CoverAll.modalDiv = document.createElement('div');
    div.style.background = '#aaaaaa';
    div.style.opacity    = '0.3';
    div.style.position   = 'fixed';
    div.style.top        = '0';
    div.style.left       = '0';
    div.style.width      = '100%';
    div.style.height     = '100%';
  }
  if(!div.parentElement) {
    document.body.appendChild(div);
  }
  if(zIndex == null)
    zIndex = 100;
  div.style.zIndex  = zIndex;
  return div;
}

CoverAll.modalUncloak = function() {
  var div = CoverAll.modalDiv;
  if(div && div.parentElement) {
    document.body.removeChild(div);
  }
  return div;
}

user10649559 · Answer 8 · 2021-11-30T04:24:56.733

0

$(".ui-dialog").css("zIndex", 10000);

edited Nov 30 '21 at 04:24

answered Nov 30 '21 at 04:23

user10649559

1
1

1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 30 '21 at 05:19

score -1 · Answer 9 · edited Sep 15 '15 at 10:08

-1

Add zIndex property to dialog object:

$(elm).dialog(
 zIndex: 10000
);

edited Sep 15 '15 at 10:08

Irvin Dominin

30,819
9
77
111

answered Jul 07 '15 at 23:40

TechieBrij

99
1
4

jQuery UI 1.10: dialog and zIndex option

9 Answers9

Linked

Related