title: Hierarchy of modal window in twitter bootstrap
body: <p>I am using Twitter Boostrap framework in my project. Currently I have a problem with using 2 modal windows in the same time. </p>
  
  <p>Code looks like:</p>
  
  <pre><code>&lt;div id="modal-dataset" class="modal hide fade in" style="display: none; "&gt;
          &lt;div class="modal-header"&gt;
              &lt;a class="close" data-dismiss="modal"&gt;x&lt;/a&gt;
              &lt;h3&gt;First&lt;/h3&gt;
          &lt;/div&gt;
  
          &lt;div class="modal-body" id="modal-dataset-body"&gt;
                  &lt;div id="data-preview-buttons"&gt;
                      &lt;button id="load_case" class="btn btn-primary" onclick="return loadNoteOrDataset();"&gt;Load second&lt;/button&gt;
                  &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;div id="modal-dataset-preview" class="modal hide fade in" style="display: none"&gt;
          &lt;div class="modal-header"&gt;
              &lt;a class="close" data-dismiss="modal"&gt;x&lt;/a&gt;
              &lt;h3&gt;Second&lt;/h3&gt;
  
              &lt;div class="modal-body" id="modal-dataset-preview-body"&gt;
                      Any text
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>In function loadNoteOrDataset() I use:</p>
  
  <pre><code>$('#modal-dataset-preview').modal('show');
  </code></pre>
  
  <p>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.</p>
  
  <p>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?</p>