title: Make twitter Bootstrap popup modal slide and stick to bottom of page
body: <p>I am using bootstrap 2.3 and I have a modal that slides from the bottom of the page after a few seconds and I want it to stick to the bottom of the screen.
  Everything is working except when you resize the browser height the modal doesn't stick to the bottom. Please help!</p>
  
  <p>This is what the pop-up looks like: <a href="https://www.dropbox.com/s/kn257b07hdle52i/Screenshot%202014-10-27%2016.09.12.png?dl=0" rel="nofollow">https://www.dropbox.com/s/kn257b07hdle52i/Screenshot%202014-10-27%2016.09.12.png?dl=0</a></p>
  
  <p>It sticks until you resize the window, then this: <a href="https://www.dropbox.com/s/r0x4mkpj9xvsu61/Screenshot%202014-10-27%2016.10.00.png?dl=0" rel="nofollow">https://www.dropbox.com/s/r0x4mkpj9xvsu61/Screenshot%202014-10-27%2016.10.00.png?dl=0</a>   </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;title&gt;pop-up&lt;/title&gt;
  
  &lt;!-- Bootstrap --&gt;
  &lt;link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen"&gt;
  
      &lt;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
       &lt;script src="bootstrap/js/bootstrap.js"&gt;&lt;/script&gt;
  
     &lt;!-- Duplicated campaign styles --&gt;
     &lt;link href="duplicate.css" rel="stylesheet" media="screen"&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
    &lt;!----------------- Pop-up timeout function-------------------&gt; 
  
  &lt;script type="text/javascript"&gt;
  
  $(document).ready(function() {
  setTimeout(function() {
    $('#slide-bottom-popup').modal('show');
  }, 1000); // milliseconds
  });
  &lt;/script&gt;
  
   &lt;style&gt;
   /*------------------------------------Pop-up styles-------------------------------------*/
  
  .modal.fade {
  top: 100%;
  -webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
   -moz-transition: opacity 0.3s linear, top 0.3s ease-out;
     -o-transition: opacity 0.3s linear, top 0.3s ease-out;
        transition: opacity 0.3s linear, top 0.3s ease-out;
  }
  
  .modal.fade.in {
  top: 74.6%; 
  
  }
  
  .modal {
  background-color: #e5e5e5;
  position: fixed;
  left: 95%;
  z-index: 1000;
  width: 275px;
  height: 250px;
  -webkit-border-bottom-right-radius: 0px;
  -moz-border-bottom-right-radius: 0px;
  border-bottom-right-radius: 0px;
   -webkit-border-bottom-left-radius: 0px;
  -moz-border-bottom-left-radius: 0px;
  border-bottom-left-radius: 0px;
  }
  
  .modal-body {
  background-size: 240px;
  position: relative;
  height: 205px;
  padding: 15px;
  }
  
  .close {
  margin-top: -10px;
  z-index: 1050;
  margin-left: 210px;
  font-size: 20px;
  font-weight: bold;
  text-shadow: 0 1px 0 #ffffff;
  opacity: 0.2;
  filter: alpha(opacity=20);
  }
  
  .popup-button {
  margin-left: 140px;
  margin-top: 77px;
  font-weight: bold;
  }
  
  &lt;/style&gt;
  
  &lt;div class="navbar-inner"&gt;
  &lt;/div&gt;
  
  &lt;div class="scrollable" id="super-container"&gt;
  &lt;div style="min-height: 350px;" class="container"&gt;
  
  &lt;!--------------------------------------------- Start Pop-up -------------------&gt; 
  
  &lt;div id='slide-bottom-popup' class="modal hide fade visible-desktop" data-keyboard="false" data-backdrop="false"&gt;
  &lt;div class="modal-body"&gt;
  &lt;a class="close" data-dismiss="modal"&gt;x&lt;/a&gt;&lt;br&gt;
  &lt;p&gt;I'm a pop sliding from the bottom that's suppose to stick&lt;/p&gt;
   &lt;a href="" class="btn-primary btn-plain btn popup-button"&gt;CTA&lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>