title: Modal Fade Class stops Modal Start
body: <p>Issue:
  When I remove <code>*class="modal fade"*</code> my code works in the fact that it appears, though the buttons don't function (I'm hoping it's the Class issue that is faulting the code)</p>
  
  <p>Notes:
  The code is designed to pop up, as per a modal, on page load. I've included code for the aspx, .aspx.vb and the specific CSS code for the "modal fade".</p>
  
  <p>Code:</p>
  
  <p><strong>.aspx</strong></p>
  
  <pre><code>&lt;%@ Page Language="VB" AutoEventWireup="false" CodeFile="Dashboard1.aspx.vb" Inherits="_Dashboard1" %&gt;
  
  &lt;!DOCTYPE html&gt;
  &lt;html dir="ltr" lang="en-US"&gt;
  
  &lt;head&gt;
      &lt;meta name="ROBOTS" content="NOINDEX, NOFOLLOW"&gt;
  
  
      &lt;script src="js/bootstrap.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;link href="css/bootstrap.min.css" rel="stylesheet" /&gt;
  
      &lt;title&gt;Title&lt;/title&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container-fluid"&gt;
  
          &lt;script type="text/javascript"&gt;
              function openModal() {
                  $('#StartModal').modal('show');
              }
          &lt;/script&gt;
  
  
          &lt;div class="modal fade" id="StartModal" tabindex="-1" role="dialog" aria-labelledby="myStartModal"&gt;
              &lt;div class="modal-dialog700" role="document"&gt;
                  &lt;div class="modal-content"&gt;
                      &lt;div class="modal-header"&gt;
                          &lt;h3&gt;&lt;/h3&gt;
                          &lt;button type="button" class="Close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
                          &lt;h4 class="modal-title" id="x"&gt;Welcome&lt;/h4&gt;
                      &lt;/div&gt;
  
                      &lt;div class="modal-body"&gt;
  
                          &lt;p&gt;Welcome to the Test.&lt;/p&gt;
  
                          &lt;div class="modal-footer"&gt;
                              &lt;br /&gt;
                              &lt;div class="modal-footer"&gt;
                                  &lt;br /&gt;
                                  &lt;button type="button" class="btn btn-primary" data-dismiss="modal"&gt;Start&lt;/button&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      Some random text on the main page
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>.aspx.vb</strong></p>
  
  <pre><code>Partial Class _Dashboard1
      Inherits System.Web.UI.Page
  
      Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
  
  
          '#####///Launch start script modal
          ScriptManager.RegisterStartupScript(Me, Me.[GetType](), "Pop", "openModal();", True)
          '#####\\\Launch start script modal
  
      End Sub
  
  End Class
  </code></pre>
  
  <p>CSS Code Sample (bootstrap.min.css)</p>
  
  <pre><code>.modal {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1050;
      display: none;
      overflow: hidden;
      -webkit-overflow-scrolling: touch;
      outline: 0;
  }
  
      .modal.fade .modal-dialog {
          -webkit-transition: -webkit-transform .3s ease-out;
          -o-transition: -o-transform .3s ease-out;
          transition: transform .3s ease-out;
          -webkit-transform: translate(0,-25%);
          -ms-transform: translate(0,-25%);
          -o-transform: translate(0,-25%);
          transform: translate(0,-25%);
      }
  
      .modal.in .modal-dialog {
          -webkit-transform: translate(0,0);
          -ms-transform: translate(0,0);
          -o-transform: translate(0,0);
          transform: translate(0,0);
      }
  
  .modal-open .modal {
      overflow-x: hidden;
      overflow-y: auto;
  }
  
  .modal-dialog {
      position: relative;
      width: auto;
      margin: 10px;
  }
  </code></pre>
  
  <p>Research:</p>
  
  <p><a href="https://stackoverflow.com/questions/32199847/bootstrap-modal-class-modal-fade-causing-problems">Bootstrap modal: class=&quot;modal fade&quot; causing problems</a></p>
  
  <p><a href="https://stackoverflow.com/questions/8146996/twitter-bootstrap-modal-fade">Twitter bootstrap: modal fade</a></p>