TBS3 Peek Modal from Bottom

Stackoverflow answer: http://stackoverflow.com/questions/26598291/make-twitter-bootstrap-popup-modal-slide-and-stick-to-bottom-of-page

by nsatija

HTML

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<div class="modal fade" id="slide-bottom-popup" data-keyboard="false" data-backdrop="false">
    <div class="modal-body">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <p>I'm a pop sliding from the bottom that's suppose to stick</p>
        <a href="" class="btn-primary btn-plain btn popup-button">CTA</a>
    </div><!-- /.modal-body -->
</div><!-- /.modal -->

CSS

.modal.fade.in .modal-body {
    bottom: 0; 
    opacity: 1;
}
.modal-body {
    position: absolute;
    bottom: -250px;
    right: 5%;
    padding: 30px 15px 15px;
    width: 275px;
    height: 250px;
    background-color: #e5e5e5;
    border-radius: 6px 6px 0 0;
    opacity: 0;
    -webkit-transition: opacity 0.3s ease-out, bottom 0.3s ease-out;
    -moz-transition: opacity 0.3s ease-out, bottom 0.3s ease-out;
    -o-transition: opacity 0.3s ease-out, bottom 0.3s ease-out;
    transition: opacity 0.3s ease-out, bottom 0.3s ease-out;
}
.close {
    margin-top: -20px;
    text-shadow: 0 1px 0 #ffffff;
}
.popup-button {
    margin-left: 140px;
    margin-top: 77px;
    font-weight: bold;
}

JavaScript

$(document).ready(function() {
    setTimeout(function() {
      $('#slide-bottom-popup').modal('show');
    }, 1000); // milliseconds
});