如何让 div 漂浮在 jQuery UI 对话框上方？答案

【问题标题】：How to get a div to float above a jQuery UI dialog?如何让 div 漂浮在 jQuery UI 对话框上方？
【发布时间】：2010-11-30 20:30:10
【问题描述】：

我有一个带有表单的 jQuery 对话框，我想要一个附加到表单元素之一的自动完成框浮动在对话框上方（这样如果列表超出对话框的末尾，它不会被切断）。我将以下 CSS 元素应用于自动完成 div：

background:none repeat scroll 0 0 white;
float:left;
position:absolute;
z-index:9999;

它仍然会在对话框中创建一个滚动条。这是怎么回事？我看到对话框是 z-index:1004;所以我不知道为什么我的不继续。我正在努力实现的目标是否可能？

【问题讨论】：

标签： css jquery-ui

【解决方案1】：

我知道这篇文章很旧，但你可以这样做：

将 jquery ui css 文件中的“ui-dialog”类设置为overflow:visible，或者如果您的对话框在单击按钮时打开，例如，请执行以下操作：

$("mybutton").click(function() {
    $("mydialog").dialog();
    $(".ui-dialog").css("overflow", "visible");
});

如果您不希望所有对话框（如果您有更多对话框）都有overflow:visible，请执行第二件事

【讨论】：

【解决方案2】：

它发生的原因是因为您的元素是对话框容器的子元素。 z-index 不会做你想做的事。该元素需要位于对话框之外并相应地定位。

【讨论】：

【解决方案3】：

不确定这是否是您想要的，但认为是 id 共享。我在对话框窗口中添加了一个 div 并使其覆盖内容：

.dialogWindowLoading {
 z-index:99999; 
 background:rgba(0,0,0,0.8);;
 width:100%;
 height:100%;
 position:absolute;
 top:0;
 left:0;
}

 $("#dialogWindow").dialog({
         autoOpen: false,
         resizable: false,
         draggable: false,
         modal: true,
         position: { my: 'center', at: 'center' },
         heigth: 425,
         width: 400,
         title: "dialog window",
         open: function (event, ui) {
                $("#dialogWindow").append("
                 <div id='dialogWindowLoading'><span>dialog window overlay</span></div>");     
            }
        }).parent().appendTo("form:first");

【讨论】：