CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-ui
raducup
raducup

Reputation: 711

jQuery UI 1.10: dialog and zIndex option

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();
}

Upvotes: 57

Views: 114832

Answers (11)

sariDon
sariDon

Reputation: 7971

Most of the answers provided will change 'all' the z-indices of the available/declared dialogs. If you want to be specific, you can:

  1. Assign a class to the dialog when declaring it:
$( obiect ).dialog({
        dialogClass: "no-close",
        modal: true,
        draggable: true,
        overlay: "background-color: red; opacity: 0.5",
        classes: {'ui-dialog': 'dlg_wrap'}, // Assign a class 'dlg_wrap' to the dialog
        buttons: [
            {
                text: "OK",
                click: function() {
                    $( this ).dialog( "close" );
                }
            }
        ]
    });
  1. Declare the z-index of the assigned class with CSS:
.dlg_wrap{z-index: 99999 !important;}

Upvotes: 0

Sartaj
Sartaj

Reputation: 159

First set initial Z-index with Javascript. Make dialog top on page.

    var maxZI = Math.max.apply(null,$.map($(\'body *\'), function(el,index){ if ($(el).css(\'position\') != \'static\') return parseInt($(el).css(\'z-index\')) || 0; }));
    $(".selector").parent(".ui-dialog").css("z-index",maxZI+1);

Second Step use moveToTop method on create, make dialog top of another dialogs.

    create: function(event, ui) { $(".selector").dialog("moveToTop"); };

Upvotes: 0

user10649559
user10649559

Reputation: 1

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

Upvotes: 0

IAM_AL_X
IAM_AL_X

Reputation: 1341

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;
}

Upvotes: 0

Carlos Saenz
Carlos Saenz

Reputation: 1

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.

Upvotes: 0

TechieBrij
TechieBrij

Reputation: 99

Add zIndex property to dialog object: 

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

Upvotes: -1

Morvael
Morvael

Reputation: 3567

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/

Upvotes: 5

Alain Gauthier
Alain Gauthier

Reputation: 889

You may want to try jQuery dialog method: 

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

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

Upvotes: 11

Irvin Dominin
Irvin Dominin

Reputation: 30993

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.

Upvotes: 121

Rajiv007
Rajiv007

Reputation: 1136

Add in your CSS:

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

Upvotes: 8

Rohan Kumar
Rohan Kumar

Reputation: 40639

Add this before calling dialog

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

And remove

 zIndex: 700,

from dialog

Upvotes: 0

Related Questions