在模态窗口页脚下显示的Bootstrap下拉列表z-index

Question

我在使用bootstrap时遇到了一些样式问题。

我有一个包含下拉列表的小模态窗口。但是我似乎无法将下拉显示在窗口的页脚上。

我玩过下拉列表的zindex，确保它高于Windows，但没有运气。

任何人都可以建议我应该改变什么吗？

html

<div class="modal hide fade" id="store-modal">
<div class="modal-header">
    <h3 id="reward-title">Select Store</h3>
</div>
<div class="modal-body">
    <p>
        Please select the store you are working from
            <div class="btn-group">
                <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Select<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    @foreach (var model in Model)
                    {
                        <li>
                            <a href="#" class="store" data-id="@Html.DisplayFor(modelItem => model.StoreId)">@Html.DisplayFor(modelItem => model.StoreName)</a>
                        </li>
                    }
                </ul>
            </div>

    </p>
</div>
<div class="modal-footer">
</div>

Answer 1

如果您设置下拉列表的z-index，请确保它已定位。意味着它有两个位置：绝对，位置：相对或位置：固定。

Answer 2

您只需添加一个z-index作为属性高于模型框页脚的类。

要使z-index起作用，您还必须设置position = relative，absolute或fixed。将z-index设置为5000也可能有所帮助。 （模态可能有z指数高于2000年。

所以在你的CSS中我会添加这个：

.class-of-dropdown {
    position: relative;
    z-index: 5000;
}

.modal-body类有一个overflow-y：auto属性。您可能需要将其更改为：

.modal-body {
    overflow-y:visible;
}