title: jQuery Bootstrap multiple modals, how to hide active/top modal only
body: <p>I've got a modal form that sometimes requires a second modal to be opened to set or display some data. I'm able to launch the first and second modals OK, but when I close the 'top' modal, both modals are hidden. Is it possible to hide one modal at a time?</p>
  
  <p>Show Modal One:</p>
  
  <pre><code>$('#content').on('click', "a#AddItemModal", function () {
      var id = $(this).attr('value');
  
      var val = '/AddItems/id:' + id;
  
      $('#addItemBody').load(val);
      $('#addItemModal').modal({});
  
  });
  </code></pre>
  
  <p>Modal One:</p>
  
  <pre><code>&lt;div class="modal fade hide" id="addItemModal" tabindex="-1" role="dialog"&gt;
      &lt;div class="modal-body"&gt;
          &lt;p id="addItemBody"&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
          &lt;a href="#" class="btn"  data-dismiss="modal" id="good"&gt;Close&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Show Modal Two:</p>
  
  <pre><code>$('#test_embed').click(function () {
          var val = $('#formEmbed').val();
          $('#myModalLabel').html('Embed Preview');
          $('#embedBody').html(val);
          $('#embedModal').modal({});
      });
  </code></pre>
  
  <p>Modal Two:</p>
  
  <pre><code>&lt;div class="modal fade hide" id="embedModal" tabindex="-1" role="dialog"&gt;
      &lt;div class="modal-header"&gt;
          &lt;h3 id="myModalLabel"&gt;Embed Preview&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
          &lt;p id="embedBody"&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
          &lt;button class="btn" data-dismiss="modal"&gt;Close&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>