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屋！