0

这是我的 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 组件上设置一个元素呢？

4

2 回答 2

4

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

于 2013-01-07T12:56:04.357 回答
0

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

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

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

于 2017-02-13T08:59:20.107 回答