Bootstrap 4 Modal animation with animate.css

Bootstrap 4 Modal animation ✔ Modal con animación【Animate.CSS】

Bootstrap 4 Modal animation with animate.css | Bootstrap 4 Modal con animación usando animate.css

By Stelios Ioannides


Subscribe for more Code

Recibe las Actualizaciones de HTML y CSS


DEMO
HTML

<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal with Animation
</button>

<!-- Modal -->
<div class="modal modalAnimate fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true" data-animation-in="fadeInLeft" data-animation-out="bounceOut">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-dialog">
<div class="modal-content">

<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>

<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>

<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>

</div>
</div>
</div>

</div>


ANIMATE CSS

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

CSS

.modal.fade{opacity:1}
.modal.fade .modal-dialog{-webkit-transform:translate(0);-moz-transform:translate(0);transform:translate(0)}

JS

function modalAnimation(animation) {
  $('.modal .modal-dialog').attr('class', 'modal-dialog  ' + animation + ' animated');
};
$('.modalAnimate').on('show.bs.modal', function (e) {
  var anim = $(this).attr('data-animation-in');
  modalAnimation(anim);
});
$('.modalAnimate').on('hide.bs.modal', function (e) {
  var anim = $(this).attr('data-animation-out');
  modalAnimation(anim);
});
¿Te gusto el post?
¡Compártelo!

Gabriela Laya

Me gusta mucho el Diseño Web, Crear plantillas para Wordpress y Blogger y todo lo relacionado a estas 2 plataformas de Blogs. En mi tiempo libre me encanta Leer, aprender a usar nuevos programas, escuchar música y más :D

Recibe las últimas actualizaciones