Changing a bootstrap modal dialog effect is very easy to do with animate.css. If you are bored with the standard bootstrap effect, animate.css is the best and lightweight solution to be applied with your web application.
Animate.css is an animated CSS owned by Daniel Eden that can be combined with bootstrap framework without reducing performance.
So that animation can work well you need to add the following CSS code:
1 2 3 4 5 | .modal.fade .modal-dialog { -webkit-transform: translate(0); -moz-transform: translate(0); transform: translate(0); } |
To change the standard animation from bootstrap modal form, it is necessary to add a javascript modal event. As an example, I will add animation flipInX when modal dialog called and will add animation flipOutY when the modal dialog is closed.
1 2 3 4 5 6 | $('.modal').on('show.bs.modal', function (e) { $('.modal .modal-dialog').attr('class', 'modal-dialog flipInX animated'); }) $('.modal').on('hide.bs.modal', function (e) { $('.modal .modal-dialog').attr('class', 'modal-dialog flipOutX animated'); }) |
Jquery script above will change the value of class attributes in the .modal and .modal-dialog class. Whereas bootstrap dialog event executed is show.bs.modal and hide.bs.modal.
Bootstrap modal dialog has a few events that can be executed when a modal dialog invoked or closed. For more details, please visit http://getbootstrap.com/javascript/#modals-events
The tutorial is completed, it is very easy to change the animation or effects on the bootstrap modal dialog.
Thus my article about Change Bootstrap Modal Dialog Effect With Animate.css, hopefully useful 🙂
Latest posts by Sigit Prasetya Nugroho (see all)
- Tutorial CRUD Client and API Server Using JQuery And Lumen Part 1 - January 4, 2019
- How To Solve Problems Illegal mix of collations (latin1_swedish_ci,IMPLICIT) In Laravel - December 15, 2018
- Tutorial Create Todolist App With Vue Js 2 For Beginners - September 29, 2018
Hi there, here a little sugestion about the code, this is because with the .attr() you are setting the class and removing previous attributes for class, this is my suggestion:
$(‘.modal’).on(‘show.bs.modal’, function (e) {
$(‘.modal .modal-dialog’).addClass(‘flipInX animated’);
setTimeout(function () {
$(‘.modal .modal-dialog’).removeClass(‘flipInX animated’);
},700);
});
$(‘.modal’).on(‘hide.bs.modal’, function (e) {
$(‘.modal .modal-dialog’).addClass(‘flipOutX animated’);
setTimeout(function () {
$(‘.modal .modal-dialog’).removeClass(‘flipOutX animated’);
},700);
});
Now the previous classes aren’t touched anymore whit the .addClass() and .removeClass() JQuery functions.
thanks 🙂
This was really useful for me – many thanks.