jquery对话框中的Z-index问题。自动建议列表无法正常显示 [英] Z-index problem in jquery dialog. Autosuggest list not displayed properly
问题描述
我有问题在Jquery对话框中显示自动提示框。自动建议列表显示在对话框下面,无论什么。我尝试将autosuggest的z-index属性设置为> 1004.但没有运气。
I am having problem displaying the autosuggest box inside Jquery dialog. Auto suggest list is displayed under the dialog no matter what. I have tried setting up the z-index propery of autosuggest to > 1004. But no luck.
下面的屏幕截图
Below the screenshot
这是我用来设置自动建议列表样式的CSS类
this is the css class i have used to style the autosuggest list
ul.as-list {
position: absolute;
list-style-type: none;
margin: 2px 0 0 0;
padding: 0;
font-size: 14px;
color: #000;
font-family: "Lucida Grande", arial, sans-serif;
background-color: #fff;
background-color: rgba(255,255,255,0.95);
box-shadow: 0 2px 12px #222;
-webkit-box-shadow: 0 2px 12px #222;
-moz-box-shadow: 0 2px 12px #222;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
z-index:6000;
}
li.as-result-item, li.as-message {
margin: 0 0 0 0;
padding: 5px 12px;
background-color: transparent;
border: 1px solid #fff;
border-bottom: 1px solid #ddd;
cursor: pointer;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
z-index:6000;
}
我已将完整代码上传到此 jsfiddle 页面。你可以清楚地看到这个问题。我已经与这个战斗了近3个小时没有运气。可以帮助我。
I have uploaded the complete code in this jsfiddle page. You can see the problem there clearly. I ve been fighting with this for nearly 3 hours without a luck. can someone help me out.
推荐答案
根本原因是最外面的两个元素有 overflow:hidden
The root cause is that the outermost two elements have overflow: hidden
.
最简单的解决方法是:
.ui-dialog, .ui-dialog-content {
overflow: visible !important
}
如果你不喜欢使用!important
(这不是好的做法),你可以找到<$ c $
If you're not happy with using !important
(it's not good practise), you can find the place where overflow: hidden
is actually being applied, and fix it there.
快速修复版本:http://jsfiddle.net/mNQVr/ (已在Chrome,Firefox,IE中测试)
Quick fix version: http://jsfiddle.net/mNQVr/ (tested in Chrome, Firefox, IE)
这篇关于jquery对话框中的Z-index问题。自动建议列表无法正常显示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!