Bootstrap 模态中选择的下拉菜单隐藏在模态页脚后面

Posted 2023-05-07

【中文标题】Bootstrap 模态中选择的下拉菜单隐藏在模态页脚后面

【英文标题】：Chosen dropdown within Bootstrap modal is hidden behind modal footer

【发布时间】：2012-11-25 22:39:16

【问题描述】：

我正在使用基于 twitter bootstrap 示例的模式。我有一个使用选择的选择元素。 When the chosen select drops down, it is cut off by the modal footer.我尝试在所选元素上添加 z-index 值，但没有任何效果。我正在倾斜地看着它，想知道是否只是因为选择元素与模态页脚 div 之前的 div 一起使用？我也使用了 selected 和 bootstrap 中的默认 CSS，所以我没有修改任何内容。

例子。

html：

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    ×</button>
                <h3>
                    Add Tag</h3>
            </div>
            <div class="modal-body">
                <div class="control-group">
                    <label for="addedTags">
                        Add tags (separated by commas)
                    </label>
                    <input id="addedTags" style="width: inherit" type="text">
                </div>
                <div class="control-group">
                    <label for="deleteTags">
                        Delete tags
                    </label>
                    <select style="display: none;" class="tags chzn-done" id="deleteTags" multiple="multiple" name="deleteTags"><option value="49">Accessories</option>
    <option value="69">AG_Adriano_Goldschmied</option>
    <option value="37">BCBG</option>
    <option value="38">Bebe</option>
    <option value="45">Bernie_Dexter</option>
    <option value="19">Black</option>
    <option value="6">Blue</option>
    <option value="66">Body-Con</option>
    <option value="71">Casual</option>
    <option value="39">Christian_Louboutin</option>
    <option value="64">Clear</option>
    <option value="50">Coach</option>
    </select><div style="width: [object Object]px;" class="chzn-container chzn-container-multi chzn-container-active" id="deleteTags_chzn">
<ul class="chzn-choices"><li class="search-field"><input value="Select Some Options" class="default" autocomplete="off" style="width: 149px;" type="text"></li></ul>
<div class="chzn-drop" style="left: 0px; top: 29px;"><ul class="chzn-results"><li id="deleteTags_chzn_o_0" class="active-result highlighted" style="">Accessories</li><li id="deleteTags_chzn_o_1" class="active-result" style="">AG_Adriano_Goldschmied</li><li id="deleteTags_chzn_o_2" class="active-result" style="">BCBG</li><li id="deleteTags_chzn_o_3" class="active-result" style="">Bebe</li><li id="deleteTags_chzn_o_4" class="active-result" style="">Bernie_Dexter</li><li id="deleteTags_chzn_o_5" class="active-result" style="">Black</li><li id="deleteTags_chzn_o_6" class="active-result" style="">Blue</li><li id="deleteTags_chzn_o_7" class="active-result" style="">Body-Con</li><li id="deleteTags_chzn_o_8" class="active-result" style="">Casual</li><li id="deleteTags_chzn_o_9" class="active-result" style="">Christian_Louboutin</li><li id="deleteTags_chzn_o_10" class="active-result" style="">Clear</li><li id="deleteTags_chzn_o_11" class="active-result" style="">Coach</li></ul></div></div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">
                    Close</button>
                <input class="btn btn-primary" id="btnAddTags" value="Save" type="button">
                <span class="loader"></span>
            </div>
            <div class="alert alert-error hide">
                <button type="button" class="close" data-dismiss="alert">
                    ×</button>
                <strong>Error</strong> <span class="alert-msg"></span>
            </div>
            <div class="alert alert-success hide">
                <button type="button" class="close" data-dismiss="alert">
                    ×</button>
                <strong>Success</strong> <span class="alert-msg"></span>
            </div>

【参考方案1】：

要使 z-index 起作用，您还必须设置 position = relative、absolute 或 fixed。也将 z-index 设置为 5000 可能会有所帮助。 （模态在 2000 年代的 z 索引处。

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

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

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

.modal-body 
    overflow-y:visible;

【讨论】：

chozen 元素确实在 css 中设置了位置值，我将 z-index 设置为 9999，但仍然没有 jive。这个快把我逼疯了！

你尝试过溢出修复了吗？

做到了！厉害的抓人。其中一些 CSS 元素真的让我陷入了循环。再次感谢！

@hajpoj 我有同样的问题，但在我的情况下，我无法将.modal-body 类设置为溢出可见因为我在模态上有很多下拉菜单，因此我需要放置 overlow:scroll 否则模态重叠。如果我删除溢出，我会遇到奇怪的情况：如果我放置溢出，滚动模式重叠：滚动下拉出现在该模式下，如上面的示例，请您在这种情况下帮助我。谢谢

下拉菜单是模态右侧的子项。因此，只要页脚没有 z-index，即使 z-index: 1 也应该可以工作

【参考方案2】：

我也遇到了同样的问题，无法让@hajpoj 工作。我确实通过设置以下 css 让它工作：

.modal-body  
    position: static;