当 jquery-ui 对话框打开时，无法设置焦点或在<div>对话框外部输入文本

Question

我有一个搜索框，即使打开jQuery ui对话框，也应该可以访问它。当我使用jQuery ui 1.11.4版本时，这是有效的。在将它更新到jQuery 1.13.1版本后，我开始注意到这个问题。

如果我回滚版本升级，它是有效的，但我想使用jQuery ui 1.13.1版本，并且也有这个功能。

我试过使用CSS，但没用。

HTML:

<div class="search-menu">
<div>Search</div>
<input type="text" id="searchBox" />
</div>
<div id="myDialog">
This is the content of my modal dialog box
</div>
<button id="clickMe">Open dialog</button>

Javascript+jQuery：

//Set up the dialog box
$("#myDialog").dialog({
autoOpen  : false,
modal     : true,
title     : "A Dialog Box",
buttons   : {
'OK' : function() {
alert('The OK button was clicked');
},
'Close' : function() {
alert('The Close button was clicked');
$(this).dialog('close');
}
}
});
//Open the dialog box when the button is clicked.
$('#clickMe').click(function() {
$("#myDialog").dialog("open");
});

CSS：

.search-menu {
position: fixed;
top: 5px;
right: 25px;
}
.ui-widget-overlay, .ui-dialog {
top: 50px;
}

jsfiddle示例

Answer 1

您需要将z索引添加到高于对话框的搜索框中

.search-menu {
z-index: 9999;
}