如何使一个 div 浮在 jQuery UI 对话框之上？

Question

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

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

它仍然会在对话框中创建一个滚动条。怎么回事？我看到对话框的z-index：1004;所以我不知道为什么我的内容没有显示在顶部。我想要实现的目标是否可能？

- user500038

Answer 1

我知道这篇文章有些旧了，但你可以像这样做:

要么在jquery ui css文件中将“ui-dialog”类设置为overflow:visible，或者如果你的对话框是在点击按钮时打开的，例如，可以像这样做:

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

如果您不希望所有对话框（如果您有更多）都具有overflow:visible，请执行第二个操作。

- Stefan

Answer 2

出现这种情况是因为您的元素是对话框容器的子元素。z-index不能实现您想要的效果。该元素需要在对话框之外并相应地定位。

- Gregg

Answer 3

不确定这是否符合您的要求，但我想分享一下。我在对话框窗口中添加了一个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");

- hackingchemist