How can I set an element over Twitter's Bootst

Question

This is my base HTML for the Twitter's Bootstrap modal:

<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>

As my Firebug says, the modal class has: z-index: 1050. I was trying to add an element like this:

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

Into the:

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

But it doesn't work.

So, how can I set an element over all these Bootstrap components?

Answer 1

You might want to add position:fixed in css of the div that you want on top of the modal and <style> .modal{z-index:4} </style> in your code. Hope this helps.

Or else, you can load a modal on top of another modal you can refer to this example as well Modal on top of Modal.

Or finally you can do one thing, you can hide the modal by using jquery or js (this is what I did) by $("#myModal").hide() and $("#yourdiv").show(), this resolve the whole z-index problem altogether.

Answer 2

You have given inline style for class attribute <div class="width: 1000px height: 200px; background: #f00; z-index: 9999;">hi there</div>. Try Changing attribute class to style.