出现在某些元素下方的 jQuery UI 模态对话框

Question

对话框显示正确并按应有的方式工作。但是，当我在页面中移动对话框时，一些元素将悬停在对话框上，即对话框位于这些元素下方。

与对话框相关的周围区域适当变灰，除了悬停在对话框上方的两个元素；它们保留各自的颜色。

这两个页​​面元素的共同点是它们都是背景图像（我需要它们），使用 CSS 背景属性设置。它们是页面上唯一设置的背景图像，所以我假设这是原因，但我不知道为什么或如何解决它。

Chrome 和 Firefox 的行为相同（不知道 IE、Opera 或 Safari）。
我正在使用 jQuery 1.10.1 和 jQuery UI 1.10.3，对话框大致如下：

$( "#launch-dialog" ).dialog({
    autoOpen: false,
    height: 'auto',
    width: 'auto',
    modal: true,
    buttons: {
        "OK": function() {
            $("#launch-dialog").text("");
            $( this ).dialog( "close" );
        },
      },
      close: function() {
          allFields.val( "" ).removeClass( "ui-state-error" );
      }
    });

背景图片的指定方式没有什么特别之处。
谁能帮帮我？

Answer 1

您应该将出现在对话框顶部的元素的 CSS 中的 z-index 属性更改为较小的数字。听起来它比目前的实际对话要高，因此你的问题