Question

我有一个带有表单的jQuery对话框，我希望附加到其中一个表单元素的自动完成框浮动到对话框上方（这样如果列表超出了对话框的结尾，那么不会被切断）。我有以下CSS元素应用于自动完成div：

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

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

Answer 1

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

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

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

如果您不希望所有对话框（如果有更多）都有overflow:visible

，请做第二件事

Answer 2

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

Answer 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");

如何让div浮动到jQuery UI对话框之上？

3 个答案: