title: Modal Window Disappears Quickly
body: <p>I am trying to implement 2 modal windows.  The first modal window will include a contact form.  When the user clicks submit, I would like the first modal window to disappear and a new modal window to appear right after.</p>
  
  <p>In my situation, after the submission button is pressed, first modal disappears, second modal would briefly appear then disappear.</p>
  
  <p>I made sure that I only have bootstrap-modal.js</p>
  
  <p>Any help or guidance would greatly be appreciated!
  Thank you</p>
  
  <p>First Modal</p>
  
  <pre><code>&lt;div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
      &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
          &lt;h3 id="myModalLabel"&gt;Contact&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
  
      &lt;form class="form-horizontal"&gt;  
              &lt;fieldset&gt;  
                  &lt;div class="control-group"&gt;  
                      &lt;label class="control-label" for="input01"&gt;Name&lt;/label&gt;  
                      &lt;div class="controls"&gt;  
                        &lt;input type="text" class="input-xlarge" id="input01" name = "name"&gt;  
                      &lt;/div&gt;  
                  &lt;/div&gt; 
                  &lt;div class="control-group"&gt; 
                      &lt;label class="control-label" for="input01"&gt;E-mail&lt;/label&gt;  
                      &lt;div class="controls"&gt;  
                        &lt;input type="text" class="input-xlarge" id="input01"&gt;  
                      &lt;/div&gt;  
                  &lt;/div&gt;  
  
                &lt;div class="control-group"&gt;  
                  &lt;label class="control-label" for="textarea"&gt;Message&lt;/label&gt;  
                  &lt;div class="controls"&gt;  
                    &lt;textarea class="input-xlarge" id="textarea" rows="3"&gt;&lt;/textarea&gt;  
                  &lt;/div&gt;  
                &lt;/div&gt;  
              &lt;/fieldset&gt;  
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
          &lt;button id= "form-submit" type="submit" class="btn btn-primary"&gt;Send&lt;/button&gt;  
          &lt;button class="btn" data-dismiss="modal" aria-hidden="true"&gt;Cancel&lt;/button&gt;  
      &lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Second Modal</p>
  
  <pre><code>&lt;div id="messageSentModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
      &lt;div class="modal-header"&gt;
              &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
              &lt;h3 id="myModalLabel"&gt;Success!&lt;/h3&gt;
              &lt;p&gt;Your Message has been sent!&lt;/p&gt;
              &lt;button class="btn" data-dismiss="modal" aria-hidden="true"&gt;Close&lt;/button&gt;  
      &lt;/div&gt;
  
  &lt;/div&gt;  
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>&lt;script src="index_files/jquery.js"&gt;&lt;/script&gt;
  &lt;script src="index_files/bootstrap-transition.js"&gt;&lt;/script&gt;
  &lt;script src="index_files/bootstrap-alert.js"&gt;&lt;/script&gt;
  &lt;script src="index_files/bootstrap-modal.js"&gt;&lt;/script&gt;
  &lt;script src="index_files/bootstrap-dropdown.js"&gt;&lt;/script&gt;
  &lt;script src="index_files/bootstrap-scrollspy.js"&gt;&lt;/script&gt;
  &lt;script src="index_files/bootstrap-tab.js"&gt;&lt;/script&gt;
  &lt;script src="index_files/bootstrap-tooltip.js"&gt;&lt;/script&gt;
  &lt;script src="index_files/bootstrap-popover.js"&gt;&lt;/script&gt;
  &lt;script src="index_files/bootstrap-button.js"&gt;&lt;/script&gt;
  &lt;script src="index_files/bootstrap-collapse.js"&gt;&lt;/script&gt;
  &lt;script src="index_files/bootstrap-carousel.js"&gt;&lt;/script&gt;
  &lt;script src="index_files/bootstrap-typeahead.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Javasscript custom code</p>
  
  <pre>
  
  a = $(".span4").find('h3'); 
  $(document).ready(function()
  {
      $(".box").hide();
      a.click(function(){
          $(this).next(".box").slideToggle(600);
          $(this).removeClass("sub_heading");
      });
      a.hover(
       function () {
         $(this).addClass("sub_heading");
       }, 
       function () {
         $(this).removeClass("sub_heading");
       }
      );  
  });
  
  //submission button
  $("#form-submit").click(function(){
      $("#myModal").modal('hide'); //hide first modal
      $("#messageSentModal").modal('show');   //show second modal
  });
  
    
  </pre>