如何强制 jQuery UI Selectmenu 出现在 jQuery 模式窗口上方（即前面）？
我正在使用 jQuery UI Selectmenu 来设置表单下拉菜单的样式。我创建了表单的示例页面，以便您可以准确地看到我要问的内容：
正如您在单击上面的示例链接后到达的页面上看到的那样，主页的 jQuery UI Selectmenu 下拉列表（字段：“Page Dropdown 1”）一切正常和“页下拉菜单 2")。我遇到的问题是我无法让下拉菜单正确显示在页面内的模式窗口上。
请点击上面页面的“搜索”按钮进入模态窗口示例。
错误在于模态窗口的下拉菜单（字段：“模态下拉菜单 1”和“模态下拉菜单 2”）出现在模态窗口后面。当您单击下拉菜单时，您可以看到它们的底部出现在模式窗口的底部边缘下方。所以我的问题是：
如何强制 jQuery UI Selectmenu 出现在 jQuery 模式窗口内（即前面）而不是后面？
我使用 FancyBox 使用以下代码创建模态窗口：
<a id="terminateEmployee_01" href="#terminateEmployeeShortcut">
<img src="/search/img/buttons/search_out.gif" width="200" height="34" class="rollover">
</a>
这是定义模态窗口下拉样式的代码：
<script type="text/javascript">
<!--
$(document).ready(function() {
// Dropdown Width Definitions
$('select#modalDD01').selectmenu({
style:'dropdown',
width: 200,
maxHeight: 238
});
$('select#modalDD02').selectmenu({
style:'dropdown',
width: 200,
maxHeight: 238
});
});
// -->
</script>
这是创建模态窗口所在的 DIV 的代码：
<div style="display: none;">
<div id="terminateEmployeeShortcut" style="width:470px;height:165px;overflow:auto;">
<table width="460" cellspacing="0">
<tr>
<td class="bodyLabel" width="220">Modal Dropdown 1</td>
<td width="20"></td>
<td class="bodyLabel" width="220">Modal Dropdown 2</td>
</tr>
<tr>
<td width="220">
<fieldset>
<select name="modalDD01" id="modalDD01" tabindex="20" />
<option value="" selected=""> </option>
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
<option value="Four">Four</option>
<option value="Five">Five</option>
</select>
</fieldset>
</td>
<td width="20"></td>
<td width="220">
<fieldset>
<select name="modalDD02" id="modalDD02" tabindex="20" />
<option value="" selected=""> </option>
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
<option value="Four">Four</option>
<option value="Five">Five</option>
</select>
</fieldset>
</td>
</tr>
</table>
<br clear="left"><img src="/search/img/misc/spacer.gif" height="26" width="32"><br clear="left">
<a href="javascript:void(0);"><img src="/search/img/buttons/save_pop_out.gif" width="200" height="34" class="rollover"></a></center>
</div>
</div>
再次，不过，也许看到它实际操作是最有帮助的：
也许我可以添加一些内容会让它出现在页面上所有其他内容的顶部吗？
请让我知道我还能提供什么帮助。提前非常感谢！
I'm using jQuery UI Selectmenu to style a form's dropdowns. I've created an example page of the form, so that you can see exactly what it is I am about to ask:
Test Page: jQuery UI Selectmenu
As you'll see on the page that you arrive at after clicking the above example link, everything works fine with the main page's jQuery UI Selectmenu dropdowns (fields: "Page Dropdown 1" and "Page Dropdown 2"). The problem that I have is that I cannot get the dropdowns to appear correctly on the modal window within the page.
Please click the above page's "Search" button to get to the modal window example.
The error is that the modal window's dropdowns (fields: "Modal Dropdown 1" and "Modal Dropdown 2") are appearing behind the modal window. You can see the bottom of them appear just under the modal window's bottom edge when you click on a dropdown. So my question is:
How do I force jQuery UI Selectmenu to appear within (i.e. in front) jQuery modal window and not behind it?
I am using FancyBox to create the modal window with the following code:
<a id="terminateEmployee_01" href="#terminateEmployeeShortcut">
<img src="/search/img/buttons/search_out.gif" width="200" height="34" class="rollover">
</a>
Here is the code that defines the modal window's dropdown styling:
<script type="text/javascript">
<!--
$(document).ready(function() {
// Dropdown Width Definitions
$('select#modalDD01').selectmenu({
style:'dropdown',
width: 200,
maxHeight: 238
});
$('select#modalDD02').selectmenu({
style:'dropdown',
width: 200,
maxHeight: 238
});
});
// -->
</script>
And here is the code that creates the DIV in which the modal window lives:
<div style="display: none;">
<div id="terminateEmployeeShortcut" style="width:470px;height:165px;overflow:auto;">
<table width="460" cellspacing="0">
<tr>
<td class="bodyLabel" width="220">Modal Dropdown 1</td>
<td width="20"></td>
<td class="bodyLabel" width="220">Modal Dropdown 2</td>
</tr>
<tr>
<td width="220">
<fieldset>
<select name="modalDD01" id="modalDD01" tabindex="20" />
<option value="" selected=""> </option>
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
<option value="Four">Four</option>
<option value="Five">Five</option>
</select>
</fieldset>
</td>
<td width="20"></td>
<td width="220">
<fieldset>
<select name="modalDD02" id="modalDD02" tabindex="20" />
<option value="" selected=""> </option>
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
<option value="Four">Four</option>
<option value="Five">Five</option>
</select>
</fieldset>
</td>
</tr>
</table>
<br clear="left"><img src="/search/img/misc/spacer.gif" height="26" width="32"><br clear="left">
<a href="javascript:void(0);"><img src="/search/img/buttons/save_pop_out.gif" width="200" height="34" class="rollover"></a></center>
</div>
</div>
Again, though, perhaps seeing it in action is most helpful:
Test Page: jQuery UI Selectmenu
Perhaps I can add something to it that will make it appear on top of everything else on the page?
Please let me know what else I can provide for some help with this. Thank you so much in advance!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我从 firebug 检查了您的代码，您需要更改 id 为“modalDD01-menu”和“modalDD02-menu”的 ul 属性，将
z-index:9999添加到每个 ul 的样式I checked your codes from firebug and u need to change your ul's attribute that have id 'modalDD01-menu' and 'modalDD02-menu' add
z-index:9999to each of this ul's style