JSFiddle - React, Tailwind, and code Playground

by Nayana Das

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="index.html">Home</a></li>
      <li><a href="page1.html">Page 1</a></li>
    </ul>
  </div>
</nav>

<div class="modal fade" id="slide-bottom-popup"  data-backdrop="false">
    <div class="modal-body">
        <button id="close" type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4>Cennos Commandments</h4>
        <ul>
            <li>Commandments 1</li>
            <li>Commandments 2</li>
            <li>Commandments 3</li>
            <li>Commandments 4</li>
        </ul>
    </div><!-- /.modal-body -->
</div><!-- /.modal -->

CSS

.modal.fade.in .modal-body {
    bottom: 0; 
    opacity: 1;
}

.modal-body {
    position: absolute;
    bottom: -250px;
    right: 0%;
    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;
}
body.modal-open {
    overflow: scroll;
}

.modal-open .modal {
    width: 50%;
    margin: 0 auto;
}

JavaScript

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