Modal Slide Up From Bottom

index.html

<!-- TO USE WITH WP NAV MENU: 
add 'lab-slide-up' to any nav menu item class 
-->

<!-- MODAL CONTENT SAMPLE STARTS HERE -->
<div class="modal fade" id="lab-slide-bottom-popup" data-keyboard="false" data-backdrop="false">
  
  <div class="lab-modal-body" >
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
    <h1>
			Terms and Conditions		</h1>

    <p>LICENSING</p>
    <p>Licenses are valid for one year from the date of purchase. When asking for support with any purchased plugin, you may be asked to provide a valid license key as proof of purchase.</p>
    <p>SOFTWARE UPDATES</p>
    <p>Updates are included for free for one year. If you have a valid and active license key, and your purchased plugin(s) supports it, updates will be delivered automatically from the WordPress dashboard. If your plugin(s) does not support automatic upgrades,
      then updates can be downloaded from your <a href="https://1wd.tv/my-account/" target="_blank">account</a> page.</p>
    <p>SUPPORT SERVICES</p>
    <p>Support for purchased plugins is given up to one year after the purchase date. If you wish to get support after one year, you must purchase a new license key for the plugin you are seeking support for.</p>
    <p>REFUNDS</p>
    <p>I&nbsp;firmly believe in and stand behind my&nbsp;products 100%, but I&nbsp;are understand that no all plugins&nbsp;can&nbsp;work perfectly for everyone all of the time. If you are unhappy with your purchase, or you have an issue that we are unable
      to resolve that makes the system unusable, I&nbsp;am more than happy to provide a complete refund within 30 days of your original purchase.</p>
    <p>A few conditions:</p>
    <ol>
      <li>I&nbsp;cannot provide refunds due to technical issues unless you allow us to adequately try and assist you. If we are unable to resolve the issue for you, I&nbsp;will provide a refund. Please open a support ticket before requesting a refund for
        a technical issue.</li>
      <li>Refunds may only be issued within 30 days of the purchase date. After 30 days no refunds can be processed.</li>
    </ol>
    <div class="text-center">
      <a href="https://1wd.tv/" target="_blank" class="btn-primary btn-plain btn btn-lg popup-button">Visit 1WD.tv!</a>
    </div>
  </div>
  <!-- /.modal-body -->
</div>
<!-- /.modal -->
<!-- END MODAL CONTENT SAMPLE -->

<!-- SAMPLE NAVIGATION AND BUTTON ELEMENT START HERE -->
<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="#" data-toggle="modal" data-target="#lab-slide-bottom-popup">Open Modal</a></li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>
<div class="container" style="padding-top:80px;">
  <div class="col-md-3">
    Trigger with navbar, a link, a button,
    <br>or even just set an automatic timer!
    <br>
    <br>
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#lab-slide-bottom-popup"> Launch demo modal </button>
  </div>
</div>
<!-- SAMPLE NAVIGATION AND BUTTON ELEMENT END HERE -->

modal-slide-up-from-bottom.markdown

Modal Slide Up From Bottom

This provides you a neat way to add a terms of service or other help content to any page, with activation via a link, a button, or a navigation menu tab.

A Pen by Nil Portugués Calderó on CodePen.

License.

script.js

jQuery(document).ready(function($) {
  // auto timer
  setTimeout(function() {
    $('#lab-slide-bottom-popup').modal('show');
  }, 5000); // optional - automatically opens in xxxx milliseconds

  $(document).ready(function() {
    $('.lab-slide-up').find('a').attr('data-toggle', 'modal');
    $('.lab-slide-up').find('a').attr('data-target', '#lab-slide-bottom-popup');
  });

});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

style.css

#lab-slide-bottom-popup {
  padding: 0 !important;
}

.modal.fade.in .lab-modal-body {
  bottom: 0;
  opacity: 1;
  z-index: 1000;
}

.lab-modal-body h1 {
  font-size: 4rem;
}

.lab-modal-body p {
  margin: 0;
  line-height: 1.62;
  font-weight: 300;
  font-size: 1.62rem;
  color: #666;
}

.lab-modal-body {
  position: relative;
  bottom: -250px;
  margin: 0 auto;
  padding: 40px;
  max-width: 100%;
  width: 100%;
  height: auto;
  background-color: rgb(248, 250, 247);
  border: 1px solid #BEBEBE;
  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;
  margin-right: -20px;
  text-shadow: 0 1px 0 #ffffff;
}

.popup-button {
  margin-top: 70px;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />