JSFiddle - React, Tailwind, and code Playground

by Ravindra Athreya

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<h2>Bootstrap 3 Directional Slides</h2>
<h4 style="margin-bottom: 40px;">by dave rogers</h4>
<h5>Traditional Slide-In Directions</h5>

<a class='btn btn-primary btn' data-direction='top'>Top (default)</a>
<a class='btn btn-primary btn' data-direction='left'>Left</a>
<a class='btn btn-primary btn' data-direction='right'>Right</a>
<a class='btn btn-primary btn' data-direction='bottom'>Bottom</a>

<hr>
<h5>"Zany" Angled Slide-In Directions</h5>

<a class='btn btn-info btn' data-direction='top-left'>Top-Left</a>
<a class='btn btn-info btn' data-direction='top-right'>Top-Right</a>
<a class='btn btn-info btn' data-direction='bottom-left'>Bottom-Left</a>
<a class='btn btn-info btn' data-direction='bottom-right'>Bottom-right</a>

<hr>
    
<div style='margin-top: 20px;'>
    <p>StackOverflow answer: <a href="https://stackoverflow.com/a/25718426/702420" target="_blank">https://stackoverflow.com/a/25718426/702420</a></p>
    <p>SCSS Version: <a href="http://jsfiddle.net/daverogers/96L8rtuh/" target="_blank">http://jsfiddle.net/daverogers/0tgquLuh/</a></p>
</div>

CSS

.modal.fade:not(.in).left .modal-dialog {
	-webkit-transform: translate3d(-25%, 0, 0);
	transform: translate3d(-25%, 0, 0);
}
.modal.fade:not(.in).right .modal-dialog {
	-webkit-transform: translate3d(25%, 0, 0);
	transform: translate3d(25%, 0, 0);
}
.modal.fade:not(.in).bottom .modal-dialog {
	-webkit-transform: translate3d(0, 25%, 0);
	transform: translate3d(0, 25%, 0);
}

/* Alternative Angles */
.modal.fade:not(.in).top-left .modal-dialog {
	-webkit-transform: translate3d(-25%, -25%, 0);
	transform: translate3d(-25%, -25%, 0);
}
.modal.fade:not(.in).top-right .modal-dialog {
	-webkit-transform: translate3d(25%, -25%, 0);
	transform: translate3d(25%, -25%, 0);
}
.modal.fade:not(.in).bottom-left .modal-dialog {
	-webkit-transform: translate3d(-25%, 25%, 0);
	transform: translate3d(-25%, 25%, 0);
}
.modal.fade:not(.in).bottom-right .modal-dialog {
	-webkit-transform: translate3d(25%, 25%, 0);
	transform: translate3d(25%, 25%, 0);
}

JavaScript

$('.btn').click(function() {
    $('.modal')
        .prop('class', 'modal fade') // revert to default
        .addClass( $(this).data('direction') );
    $('.modal').modal('show');
});