Change Bootstrap Modal Dialog Effect With Animate.css

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:

Change Bootstrap Modal Dialog Effect With Animate.css
Bootstrap Modal Window With Animation Example

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.

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 Modals Dialog Event

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 🙂

The following two tabs change content below.
This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Leave a Comment

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.