Почему не меняется z-индекс пользовательского диалога?

Question

У меня есть div с z-index: 1000000, и, используя пользовательский интерфейс JQuery, я пытаюсь сделать диалоговое окно поверх него.Поэтому я добавил в CSS

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

, но диалоговое окно по-прежнему находится под другим элементом div и, просматривая инспектор Chrome, я вижу z-индекс 101. Из инспектора Chrome Iсм .:

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

похоже, что мое определение .ui-dialog не читается, но я не могу понять, почему.

Диалог также является модальным, и если я добавлю

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

, то диалоговое окно появится над элементом div с z-index 1000000, но я не могу щелкнуть по нему (оно = диалоговое окно).

Можете ли вы мне помочь?

Edit1 : я использую JQuery 3.2.1 с JQuery UI 1.12.1, тема Redmond

Edit2 : я открываю диалоговое окно со следующим кодом

$("#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 : HTML-код для диалога следующий:

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

Answer 1

Когда я использую более простой пример, я не могу воспроизвести проблему.

$(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>

Вы можете использовать опцию classes для добавления классов в диалог.Это может выглядеть так:

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

Затем вы можете использовать их в своем CSS:

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

Если вы сможете обновить свой пост, я смогу помочь вам в дальнейшем.