Why doesn't ui-dialog z-index change?

Question

I have a div with z-index: 1000000 and, using JQuery UI, I'm trying to make a dialog appear over it. So I added in the CSS

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

but the dialog is still under the other div and looking with Chrome inspector, I see a z-index of 101. From the Chrome inspector I see:

<div tabindex="-1" role="dialog" class="ui-dialog ui-corner-all ui-widget ui-widget-content ui-front ui-dialog-buttons" aria-describedby="dialog" aria-labelledby="ui-id-3" style="height: auto; width: 300px; top: 379.113px; left: 284.488px; z-index: 101;">

it is like my definition of .ui-dialog isn't read, but I cannot understand why.

The dialog is also modal, and if I add

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

the dialog appears over the div with z-index 1000000, but I cannot click it (it=the dialog).

Can you help me?

Edit1: I'm using JQuery 3.2.1 with JQuery UI 1.12.1, Redmond theme

Edit2: I'm opening the dialog with the followin code

$("#dialog").dialog({
    autoOpen: false, 
    modal: true,
    draggable: false,
    resizable: false,
    title: title,
});

var buttons = {};
buttons[noButtonName] = function() {
    $( this ).dialog( "close" );
    noFun();
};
buttons[yesButtonName] = function() {   
    $( this ).dialog( "close" );
    okFun();
};
$('#dialog').dialog('option', 'buttons', buttons);
$("#dialog").dialog("open");

Edit3: The HTML for the dialog is the following:

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable">
    <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
      <span id="ui-dialog-title-dialog" class="ui-dialog-title">Add</span>
      <a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a>
   </div> 

    <div class="inline" style="position: relative; width: 100%;" id="dialog">
        <div class="inline">
            <div id="dialogMessage"></div>
        </div>

    </div>

</div>

Please provide a Minimal, Complete, and Verifiable example: stackoverflow.com/help/mcve Would be good to know the versions of each library you are using. — Twisty
– Twisty, Commented Jan 24, 2019 at 17:29
I am unable to replicate the issue with a basic example. Will post code to answer. What other CSS is at play here? It's not clear why you're trying to make all the elements for the Draggable when it already creates those for you. — Twisty
– Twisty, Commented Jan 24, 2019 at 17:52
I have other elements in my CSS... but they are too much to post here. What seems really strange is that if I define .ui-dialog I don't see it in the list of CSS properties listed by Chrome. And you are right, the elements of JQuery UI around #dialog are not needed, this is old code and I forgot how JQuery UI has to be used. — cdarwin
– cdarwin, Commented Jan 24, 2019 at 18:03
UI adds element style that will override the CSS. style="z-index: 101;" — Twisty
– Twisty, Commented Jan 24, 2019 at 18:12

Twisty · Accepted Answer · 2019-01-24 18:39:05Z

1

When I use a more basic example, I am unable to replicate the issue.

$(function() {
  function fun(r) {
    console.log(r)
  };

  $("#dialog").dialog({
    classes: {
      "ui-dialog": "inline higher"
    },
    modal: true,
    buttons: {
      Yes: function() {
        fun("yes");
        $(this).dialog("close");
      },
      No: function() {
        fun("no");
        $(this).dialog("close");
      }
    }
  });
});

div.high {
  z-index: 1000000;
}

div.higher {
  z-index: 1000002;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="inline" title="Add" id="dialog">
  <div class="inline">
    <div id="dialogMessage">Want to have some fun?</div>
  </div>
</div>

<div class="high">
  <p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
</div>

You may consider using classes option to add classes to the dialog. This might look like:

$("#dialog").dialog({
  classes: {
    "ui-dialog": "inline higher"
  }
});

You can then use these in your CSS:

.inline {
  display: inline-block;
}
.higher {
  z-index: 1000001;
}

If you can update your post, I may be able to help further.

edited Jan 24, 2019 at 18:39

answered Jan 24, 2019 at 18:09

Twisty

31k2 gold badges30 silver badges50 bronze badges

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

1 Comment

cdarwin Over a year ago

ok, it worked by removing my additional definition of .ui-dialog and .ui-front and by adding the .higher class with the classes option. Thanks (even though I read solutions that told to use the method I initially used)

Collectives™ on Stack Overflow

Why doesn't ui-dialog z-index change?

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related