Question

我有一个带有z-index: 1000000的div，并且我正在使用JQuery UI尝试在其上显示一个对话框。所以我在CSS中添加了

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

，但该对话框仍位于另一个div下，并且在使用Chrome检查器查看时，我看到z索引为101。从Chrome检查器中，我看到：

<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

使用更基本的示例时，我无法复制该问题。

COUNT(NVL(CD2, 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

然后您可以在CSS中使用它们：

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

如果您可以更新自己的信息，我也许可以提供进一步的帮助。

ui-dialog z-index为什么不更改？

1 个答案: