"Animate Modal BS4"
Bootstrap 4.0.0 Snippet by DiTso

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row text-center"> <div class="col-12"> <h1 class="text-muted">Animate Modal</h1> </div> <div class="col-md-4 col-xs-12"> <div class="bg-faded p-2 mt-5"> <h2 class="animated infinite fadeIn text-muted">Fade</h2> <div class="lead py-2 px-5" style="background-color:white;max-height:254px;overflow-y:auto"> <button class="btn btn-secondary btn-round btn-block" data-toggle="modal" data-target=".animate" data-ui-class="a-fadeUp" >Down</button> <button class="btn btn-secondary btn-round btn-block" data-toggle="modal" data-target=".animate" data-ui-class="a-fadeRight" >Left</button> <button class="btn btn-secondary btn-round btn-block" data-toggle="modal" data-target=".animate" data-ui-class="a-fadeDown" >Up</button> <button class="btn btn-secondary btn-round btn-block" data-toggle="modal" data-target=".animate" data-ui-class="a-fadeLeft" >Right</button> <button class="btn btn-secondary btn-round btn-block" data-toggle="modal" data-target=".animate" data-ui-class="a-fadeUpBig" >Down</button> <button class="btn btn-secondary btn-round btn-block" data-toggle="modal" data-target=".animate" data-ui-class="a-fadeRightBig" >Left</button> <button class="btn btn-secondary btn-round btn-block" data-toggle="modal" data-target=".animate" data-ui-class="a-fadeDownBig" >Up</button> <button class="btn btn-secondary btn-round btn-block" data-toggle="modal" data-target=".animate" data-ui-class="a-fadeLeftBig" >Right</button> </div> </div> </div> <div class="col-md-4 col-xs-12"> <div class="bg-faded p-2 mt-5"> <h2 class="animated infinite zoomIn text-muted">Zoom</h2> <div class="lead py-2 px-5" style="background-color:white;max-height:254px;overflow-y:auto"> <button class="btn btn-secondary btn-round btn-block" data-toggle="modal" data-target=".animate" data-ui-class="a-zoom" >Center</button> <button class="btn btn-secondary btn-round btn-block" data-toggle="modal" data-target=".animate" data-ui-class="a-zoomUp" >Down</button> <button class="btn btn-secondary btn-round btn-block" data-toggle="modal" data-target=".animate" data-ui-class="a-zoomRight" >Left</button> <button class="btn btn-secondary btn-round btn-block" data-toggle="modal" data-target=".animate" data-ui-class="a-zoomDown" >Up</button> <button class="btn btn-secondary btn-round btn-block" data-toggle="modal" data-target=".animate" data-ui-class="a-zoomLeft" >Right</button> </div> </div> </div> <div class="col-md-4 col-xs-12"> <div class="bg-faded p-2 mt-5"> <h2 class="animated infinite shake text-muted">Other</h2> <div class="lead py-2 px-5" style="background-color:white;max-height:254px;overflow-y:auto"> <button class="btn btn-secondary btn-round btn-block" data-toggle="modal" data-target=".animate" data-ui-class="a-lightSpeed" >Light Speed</button> <button class="btn btn-secondary btn-round btn-block" data-toggle="modal" data-target=".animate" data-ui-class="a-flipX" >Flip Vertical</button> <button class="btn btn-secondary btn-round btn-block" data-toggle="modal" data-target=".animate" data-ui-class="a-flipY" >Flip Horizontal</button> <button class="btn btn-secondary btn-round btn-block" data-toggle="modal" data-target=".animate" data-ui-class="a-roll" >Roll</button> <button class="btn btn-secondary btn-round btn-block" data-toggle="modal" data-target=".animate" data-ui-class="a-rotate" >Rotate</button> </div> </div> </div> <div class="col-12"> <p class="lead p-3 mt-3">More animate visit: <a class="btn btn-link text-muted" href="https://github.com/daneden/animate.css/" target="_blank">https://github.com/daneden/animate.css/</a></p> </div> </div> </div> <div class="modal animate" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body text-center p-lg"> <p>Are you sure to execute this action?</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>
@import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'); .bg-faded{background-color:#f3f3f3;max-height:500px} .btn-round{border-radius:500px} .btn-round,.btn-round:hover,.btn-round:active{border-color:transparent} .modal.animate {opacity:0} .modal.animate.show {opacity:1} .modal.animate .modal-dialog{-webkit-transform:translate(0,0);-ms-transform: translate(0,0);transform:translate(0,0)} .modal.animate .a-fadeLeftBig{-webkit-animation:fadeOutLeftBig .5s;animation:fadeOutLeftBig .5s} .modal.animate.show .a-fadeLeftBig{-webkit-animation:fadeInLeftBig .5s;animation:fadeInLeftBig .5s} .modal.animate .a-fadeRightBig{-webkit-animation:fadeOutRightBig .5s;animation:fadeOutRightBig .5s} .modal.animate.show .a-fadeRightBig{-webkit-animation:fadeInRightBig .5s;animation:fadeInRightBig .5s} .modal.animate .a-fadeUpBig{-webkit-animation:fadeOutUpBig .5s;animation:fadeOutUpBig .5s} .modal.animate.show .a-fadeUpBig{-webkit-animation:fadeInUpBig .5s;animation:fadeInUpBig .5s} .modal.animate .a-fadeDownBig{-webkit-animation:fadeOutDownBig .5s;animation:fadeOutDownBig .5s} .modal.animate.show .a-fadeDownBig{-webkit-animation:fadeInDownBig .5s;animation:fadeInDownBig .5s} .modal.animate .a-fadeRight{-webkit-animation:fadeOutRight .5s;animation:fadeOutRight .5s} .modal.animate.show .a-fadeRight{-webkit-animation:fadeInRight .5s;animation:fadeInRight .5s} .modal.animate .a-fadeLeft{-webkit-animation:fadeOutLeft .5s;animation:fadeOutLeft .5s} .modal.animate.show .a-fadeLeft{-webkit-animation:fadeInLeft .5s;animation:fadeInLeft .5s} .modal.animate .a-fadeUp{-webkit-animation:fadeOutUp .5s;animation:fadeOutUp .5s} .modal.animate.show .a-fadeUp{-webkit-animation:fadeInUp .5s;animation:fadeInUp .5s} .modal.animate .a-fadeDown{-webkit-animation:fadeOutDown .5s;animation:fadeOutDown .5s} .modal.animate.show .a-fadeDown{-webkit-animation:fadeInDown .5s;animation:fadeInDown .5s} .modal.animate .a-lightSpeed{-webkit-animation:lightSpeedOut .5s;animation:lightSpeedOut .5s} .modal.animate.show .a-lightSpeed {-webkit-animation:lightSpeedIn .5s;animation: lightSpeedIn .5s} .modal.animate .a-flipX{-webkit-animation:flipOutX .5s;animation:flipOutX .5s} .modal.animate.show .a-flipX{-webkit-animation:flipInX .5s;animation:flipInX .5s} .modal.animate .a-flipY{-webkit-animation:flipOutY .5s;animation:flipOutY .5s} .modal.animate.show .a-flipY{-webkit-animation:flipInY .5s;animation:flipInY .5s} .modal.animate .a-roll{-webkit-animation:rollOut .5s;animation: rollOut .5s} .modal.animate.show .a-roll{-webkit-animation:rollIn .5s;animation:rollIn .5s} .modal.animate .a-bounce{-webkit-animation:bounceOut .5s;animation:bounceOut .5s} .modal.animate.show .a-bounce{-webkit-animation:bounceIn .5s;animation:bounceIn .5s} .modal.animate .a-rotate{-webkit-animation:rotateOut .5s;animation:rotateOut .5s} .modal.animate.show .a-rotate{-webkit-animation:rotateIn .5s;animation:rotateIn .5s} .modal.animate .a-zoom{-webkit-animation:zoomOut .5s;animation:zoomOut .5s} .modal.animate.show .a-zoom{-webkit-animation:zoomIn .5s;animation:zoomIn .5s} .modal.animate .a-zoomUp{-webkit-animation:zoomOutUp .5s;animation:zoomOutUp .5s} .modal.animate.show .a-zoomUp{-webkit-animation: zoomInUp .5s;animation:zoomInUp .5s} .modal.animate .a-zoomRight {-webkit-animation: zoomOutRight .5s;animation:zoomOutRight .5s} .modal.animate.show .a-zoomRight{-webkit-animation: zoomInRight .5s;animation:zoomInRight .5s} .modal.animate .a-zoomDown{-webkit-animation:zoomOutDown .5s;animation:zoomOutDown .5s} .modal.animate.show .a-zoomDown{-webkit-animation:zoomInDown .5s;animation:zoomInDown .5s} .modal.animate .a-zoomLeft{-webkit-animation:zoomOutLeft .5s;animation:zoomOutLeft .5s} .modal.animate.show .a-zoomLeft{-webkit-animation:zoomInLeft .5s;animation:zoomInLeft .5s}
$(function(){ $('[role=dialog]') .on('show.bs.modal', function(e) { $(this) .find('[role=document]') .removeClass() .addClass('modal-dialog ' + $(e.relatedTarget).data('ui-class')) }) })

Questions / Comments: