title: Bootstrap modal - hide one then show another
body: <p>I've been using jQueryUI for a long time now but have recently made the switch to Bootstrap for aesthetic reasons.  I am now struggling with what I would expect to be a simple issue and wondered if it's something that others more familiar with Bootstrap can help me with.</p>
  
  <p>I have a generic function for creating dialogs on-the-fly and there are occasions where I show a dialog with no buttons (when processing something), and then swap it to a dialog that does have buttons (process complete - click OK, for example).  I'm not trying to define a set process here so I'm basically saying I want to be able to close one dialog and open another whenever needed.  This is where the problem comes in.</p>
  
  <p>With Bootstrap the dialogs animate in and out, and I like that and want to keep it.  I don't want to do it when swapping dialogs though.  I can do this by removing the class <code>fade</code> from the first dialog when it shows, and from the second dialog before it shows, and that works great.  I then add the class to the second dialog so that it will animate out.  However, the animation goes wrong when I do this and there's an ugly flash where the background div should fade out gently.</p>
  
  <p>I've put together a jsfiddle to demonstrate the issue.  You can click the close button on the first dialog to see what the fade out animation <em>should</em> look like.</p>
  
  <p>Any help would be appreciated before I start digging into the Bootstrap source files.</p>
  
  <p><a href="http://jsfiddle.net/ArchersFiddle/0302gLav/1/" rel="noreferrer">http://jsfiddle.net/ArchersFiddle/0302gLav/1/</a></p>
  
  <p><strong>tl;dr</strong></p>
  
  <p>Look at the jsfiddle - click "show dialog 2" - click "ok".  I want to get rid of the black flash at the end.</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>@import url("//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css");
  .modal {
      display: none;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="dialog1" class="modal fade"&gt;
    &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;h4 class="modal-title"&gt;Modal Dialog 1&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;This is the first modal dialog&lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" id="dialog-ok" class="btn btn-default"&gt;Show dialog 2&lt;/button&gt;          
          &lt;button type="button" id="dialog-close" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;          
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="dialog2" class="modal"&gt;
    &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;h4 class="modal-title"&gt;Modal Dialog 2&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;This is the second modal dialog&lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;OK&lt;/button&gt;          
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>function showDialog2() {
      $("#dialog1").removeClass("fade").modal("hide");
      $("#dialog2").modal("show").addClass("fade");
  }
  
  $("#dialog1").modal("show");
  
  $("#dialog-ok").on("click", function() {
      showDialog2();
  });
  </code></pre>