0

我有一个带有我正在显示的对话框的网页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我的对话框在打开时设置它并在关闭时清除。如果全局变量为真，则事件处理程序将忽略该事件。不用说，这是一个 hack，不会很好地扩展。

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

4

1 回答 1

0

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

例如。

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

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

删除了 zIndex 选项

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

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

于 2013-11-12T11:29:18.230 回答