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

Question

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

Answer 1

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

Answer 2

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

或者，您可以在另一个模态上加载一个模态。您可以参考本例，也可以在模态上加载模态。

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