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?