在显示jQuery对话框时是否应禁用所有基础元素？

Question

我有一个带有jQuery.dialog的对话框的网页（jQuery 1.7.1，jQuery-UI 1.8.18）。我这样创建它：

$(theDialog).dialog({
    autoOpen: false,
    width: "800px",
    modal: true, // etc....
});

在同一页面上，我有一个列表控件，我是用一堆<div>元素构建的。我聆听点击堆积的<div>元素：

$("#listEmployees div").on("click", "input", listEmployees_ItemClicked);

其中listEmployes_ItemChecked是我的事件处理程序。当我显示jQuery对话框时，HTML页面上的大多数元素都被禁用;即他们对鼠标点击没有反应，并且c。但是，我的列表堆栈不是：如果我点击其中的项目，则会调用事件处理程序。

要解决这个问题，我必须在页面上引入一个全局变量isDialogVisible，我的对话框在打开时会设置，并在关闭时清除。如果全局变量为true，则事件处理程序将忽略该事件。不用说，这是一个黑客，不会很好地扩展。

我的期望是作为模态的jQuery dialog会在这些元素打开时禁用所有HTML元素和事件。这种期望是不正确的？为什么在模态对话框启动时我仍然看到鼠标点击？

Answer 1

jQuery UI对话框（早于1.10的版本）具有zIndex属性。将zIndex设置为高于CSS中使用的任何z-index的值。

例如。

$(theDialog).dialog({
    autoOpen: false,
    width: "800px",
    modal: true,
    zIndex: 99
});

自jQuery UI v1.10起删除此功能：

  

删除了zIndex选项

     

与堆栈选项类似，a的zIndex选项是不必要的   适当的堆叠实施。 z-index在CSS和中定义   现在通过确保聚焦对话框是最后一个来控制堆叠   “堆叠”元素在其父级中。

jQuery UI对话框确实有方法moveToTop()，但这只会将对话框移动到对话框上下文的顶部，因此它位于页面上的任何其他对话框之上。开发人员的工作是确保他们的CSS不会导致堆叠问题。 “不幸的是”，jQuery UI并不是一直牵着我们的手。