Twitter引导程序中模态窗口的层次结构

Question

I am using Twitter Boostrap framework in my project. Currently I have a problem with using 2 modal windows in the same time.

Code looks like:

<div id="modal-dataset" class="modal hide fade in" style="display: none; ">
        <div class="modal-header">
            <a class="close" data-dismiss="modal">x</a>
            <h3>First</h3>
        </div>

        <div class="modal-body" id="modal-dataset-body">
                <div id="data-preview-buttons">
                    <button id="load_case" class="btn btn-primary" onclick="return loadNoteOrDataset();">Load second</button>
                </div>
        </div>

<div id="modal-dataset-preview" class="modal hide fade in" style="display: none">
        <div class="modal-header">
            <a class="close" data-dismiss="modal">x</a>
            <h3>Second</h3>

            <div class="modal-body" id="modal-dataset-preview-body">
                    Any text
            </div>
        </div>

In function loadNoteOrDataset() I use:

$('#modal-dataset-preview').modal('show');

What is the problem? First modal window appears and everything is fine, but when I want to call second window using button and 'show', it appears beneath first window, so I'm not able to see its content.

I want to build some kind of 'stack' of modal windows - new window should be visible after calling and when closed - previous window should be visible. Is there any way to set which window should be in front?

Answer 1

You could define diferent z-index values for each modal window.

$('#modal-dataset-preview').css('z-index', <value>).modal('show');

z-index MDN reference here .