title: Twitter Bootstrap Modal Fade
body: <p>I am using Twitter Bootstrap as a framework for designing a new social network that displays jobs and allows users to apply to the jobs with a simple one click process. When the user clicks "Apply" a modal window appears and gives them the option to select a resume then click "Apply." When the Apply button is clicked (opening the modal and closing the modal) I wish to have the modal fade in and out. I have all the bootstrap .js files downloaded and uploaded and I have all the CSS correct (i think), I just cannot get it to fade at all. </p>
  
  <p>Here is the first apply button clicked:</p>
  
  <pre><code>&lt;div class="float-right"&gt;&lt;button id="apply-btn" class="btn-primary" data-toggle="modal" data-target="#apply" style="height: 40px;"&gt;Apply&lt;/button&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Here is the modal html:</p>
  
  <pre><code>&lt;div id="apply" class="hide"&gt;
          &lt;div class="modal fade in"&gt;
              &lt;form class="modal-form" action="#thank-you" method="post" style="margin-bottom: 60px;"&gt;
                  &lt;div class="modal-header"&gt;&lt;h2&gt;Apply&lt;/h2&gt;&lt;/div&gt;
  
                  &lt;div class="modal-body"&gt; 
  
                      &lt;img class="apply_img" src="images/temp/prof_pic_temp.jpg" style="display: inline;"&gt;
                      &lt;div class="apply_info"&gt;
                          &lt;span class="apply_name"&gt;Tyler Bailey&lt;/span&gt;
                          &lt;ul&gt;
                              &lt;li&gt;&lt;a href="schools.php"&gt;Western Michigan University&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Film, Video &amp; Media Studies&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                          &lt;form id="doc_select" method="get"&gt;
                              &lt;select name="doc_select" style="margin-bottom: 0px;"&gt;
                                  &lt;option select="selected"&gt;Select a resume&lt;/option&gt;
                                  &lt;option value="1"&gt;Resume 1&lt;/option&gt;
                                  &lt;option value="2"&gt;Resume 2&lt;/option&gt;
                                  &lt;option value="3"&gt;Resume 3&lt;/option&gt;
                              &lt;/select&gt;
  
                              &lt;div class="control-group" style="margin-top: 25px;"&gt;
                                  &lt;label class="control-label" for="user_resume" style="font-weight: bold; margin-bottom: 0px;"&gt;Or upload new resume:&lt;/label&gt;
                                  &lt;div class="control"&gt;
                                      &lt;input type="file" id="user_resume" size="30" /&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/form&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
  
                  &lt;div class="modal-footer"&gt;
                      &lt;button type="submit" class="btn" data-dismiss="modal"&gt;Cancel&lt;/button&gt;
                      &lt;button type="submit" class="btn btn-primary"&gt;Apply&lt;/button&gt;
                  &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;&lt;!-- #apply --&gt;
  </code></pre>
  
  <p>And here is the modal fade css:</p>
  
  <pre><code>    .modal {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1050;
    max-height: 800px;
    overflow: auto;
    width: 560px;
    margin: -200px 0 0 -280px;
    background-color: #ffffff;
    border: 1px solid #999;
    border: 1px solid rgba(0, 0, 0, 0.3);
    *border: 1px solid #999;
    /* IE6-7 */
  
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
    background-clip: padding-box;
  }
  .modal.fade {
    -webkit-transition: opacity .3s linear, top .3s ease-out;
    -moz-transition: opacity .3s linear, top .3s ease-out;
    -ms-transition: opacity .3s linear, top .3s ease-out;
    -o-transition: opacity .3s linear, top .3s ease-out;
    transition: opacity .3s linear, top .3s ease-out;
  }
  .modal.fade.in {
    top: 50%;
  }
  </code></pre>
  
  <p>I have researched this for quite some time now and cannot waste anymore time on it. I know I can use jQuery to animate the fade in and out but I'd like to stick with the bootstrap framework and use it as it is supposed to be. </p>