模式对话框中的Jquery UI选择菜单

Jquery UI selectmenu inside modal dialog

本文关键字：UI 选择 菜单 Jquery 对话框 模式      更新时间：2023-09-26

嗨，我正试图在模式对话框中添加一个选择菜单，但许多选项都是隐藏的，我无法点击它们

这是的例子

http://jsfiddle.net/4dd62ukv/1/

<label for="month">Month</label>
<select name="month" id="month">
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>

知道吗？谢谢

.ui-dialog {overflow: visible;}

Fiddle

您也可以尝试以下操作：

div.ui-selectmenu-open {
    position: absolute;
    z-index: 65535;
}

对于JUI 1.11

我找到了下面的解决方案。它对我有用。

.ui-front{z-index:0 !important; } 
.ui-selectmenu-open {z-index:9999 !important;}

您不必更改任何"z-index"或"overflow"属性即可显示select菜单右侧。

如果要在对话框中创建选择菜单，请先打开对话框，然后在打开对话框后创建选择菜单。

$("idOfDialog").on("dialogopen", function(e, ui){
    $('idOfSelectMenu').selectmenu();
}

您可以使用selectmenu"appendTo"的属性来解决此问题。您所需要做的就是提供您希望select菜单可见的分区的id/class。

相关文章：