如何在 Twitter 的 Bootstrap 模式上设置元素？答案

【问题标题】：How can I set an element over Twitter's Bootstrap modal?如何在 Twitter 的 Bootstrap 模式上设置元素？
【发布时间】：2018-06-06 22:18:16
【问题描述】：

这是我的 Twitter 引导模式的基本 HTML：

<div id="editModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
    <form class="form-horizontal updater" data-type="undefined" data-id="undefined">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h3 id="modalLabel">Edit Content</h3>
        </div>
        <div class="modal-body"></div>
        <div class="modal-footer">
            <button type="submit" class="btn btn-primary">
                <strong>Save Changes</strong>
            </button>
            <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
        </div>
    </form>
</div>

正如我的 Firebug 所说，modal 类具有：z-index: 1050。我试图添加这样的元素：

<div class="width: 1000px height: 200px; background: #f00; z-index: 9999;">hi there</div>

进入：

<div class="modal-body"></div>

但它不起作用。

那么，如何在所有这些 Bootstrap 组件上设置一个元素？

【问题讨论】：

标签： html twitter-bootstrap overlay modal-dialog z-index

【解决方案1】：

您为类属性<div class="width: 1000px height: 200px; background: #f00; z-index: 9999;">hi there</div> 提供了内联样式。尝试将属性class 更改为style。

【讨论】：

你也错过了把;放在width: 1000px之后。
您希望模态框的宽度也根据内容调整大小吗？添加position:absolute 将使其高于所有元素，但模态框宽度将保持不变

【解决方案2】：

您可能希望在模态顶部的 div 的 css 中添加 position:fixed 并在代码中添加 <style> .modal{z-index:4} </style>。希望这会有所帮助。

或者，您可以在另一个模态之上加载一个模态，您也可以参考这个示例Modal on top of Modal。

或者最后你可以做一件事，你可以通过$("#myModal").hide()和$("#yourdiv").show()使用jquery或js（这是我做的）隐藏模式，这完全解决了整个z-index问题。

【讨论】：