Question

我在Jquery模式弹出窗口中出现了下拉列表的问题。

我使用lu和li标记撰写了自定义下拉列表。该职位设为absolute。它在其他地方工作得很好，但是当我把这个组件放在一个弹出窗口中，当下拉列表很长时，额外的部分将被弹出窗口覆盖，而不是弹出窗口。

我检查z-index弹出窗口是1000，我试图为下拉列表z-index标记添加更多lu值。它仍然被覆盖...希望有这方面经验的人可以帮助我，非常感谢你。

var $dialog = $(".ui-res-offer-dialog");
$dialog.modal("show");

对话框是<div></div>，其中包含.ui-res-offer-dialog类，<div>内有一些输入字段。下面是代码生成下拉列表。 $ elem是一个全局变量，它将根据点击的输入字段而改变。

function displayFieldOptions(list) {
        if($elem != null) {
            var currentValue = $elem.val().toUpperCase();
            if("" != currentValue) {
                var optionsHtml = '<ul class="field-options-container">';
                var optionsSize = 0;

                $.each(list, function(index, value) {
                    // If the value contains the user input, and the option size is under 10, add this option
                    if(value.toUpperCase().indexOf(currentValue) >= 0 && optionsSize < 10) {
                        optionsHtml += '<li class="field-options" onclick="setFieldValue(this)">' + value + '</li>';
                        optionsSize++;
                    }
                });
                optionsHtml += "</ul>";
                $(".field-options-container").remove();
                var $optionsHtml = $(optionsHtml);
                $optionsHtml.css("width",$elem.css("width"));
                // If the input box is focused and it has options inside, display it
                if($elem.is(":focus") && optionsHtml.indexOf("setFieldValue") > 0) {
                    $elem.after($optionsHtml);
                }
            } else {
                $(".field-options-container").remove();
            }
        }
    }

以下是ul标签的css代码

.field-options-container {
    z-index: 3000;
    border: 1px solid #485c87;
    background: #ffffff 50% bottom repeat-x;
    color: #222222;
    position: absolute;
}

这是模态插件

生成的对话框

<div class="ui-res-offer-dialog modal ui-res-offer-dialog-active in" role="dialog" aria-labelledby="basicModal" aria-hidden="false" data-backdrop="static" style="display: block;">
    <div class="ui-res-offer-dialog-container">
        <!-- some input fields here, too long I can't paste all of them -->
    </div>
</div>

这是对话框标签的css

.modal {
    overflow-y: scroll;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    outline: 0;
    height: 1000px;
}
.ui-res-offer-dialog-container {
    background: white;
    border-radius: 5px;
    box-shadow: 1px 2px 10px -2px rgba(0,0,0,0.85);
    display: inline-block;
    height: auto;
    margin-top: 10%;
    left: 40%;
    overflow: hidden;
    position: relative;
    width: 380px;
    color: black;
}

对于.ui-res-offer-dialog-container，即使我将高度从auto更改为静态值，下拉列表仍然会被覆盖。

Answer 1

您可能希望确保整个对话框（而不是列表）的overflow未设置为hidden，这会隐藏通常会延伸出来的任何内容，以及静态高度（在对话框上）未设置（这可能更有可能）。如果是这种情况，那么高z-index就不够了。

**我认为你的意思是＆＃39; ul＆＃39;不是＆＃39; lu＆＃39;？

z-index无法在弹出窗口中工作

1 个答案: