31 Animated Bootstrap popovers and modal live demos by velocity.js
Creating animated modal and popovers with Bootstrap and velocity.js
I have covered a number of plug-ins for creating simple and advanced modal windows that are based on Bootstrap framework. You can read by visiting the links below:
Creating simple modals by using Bootstrap framework is written here. A nice jQuery plug-in (bootstrap3-dialog) is also covered here. Another tutorial for minimizing and maximizing the modal windows can be found here.
I also covered popover enhancement plug-in for Bootstrap popovers here.
In this article, the Bootstrap popovers and modals are created with animations of different styles by using the vanilla.js component.
A demo of 31 animation styles of popovers by velocity.js
In this demo, a total 31 animated popovers are created by using the velocity.js. Just specify the animation style by using the data-easein data attribute as you create a popover. You can see the names of all animation values in the demo page’s code section. A sample popover code is given below:
See online demo and code
The markup for creating a popover:
|
1 2 |
<li><a data-original-title="Heading of the popover" data-animation="false" data-easein="flipXIn" href="#" class="btn btn-primary" rel="popover" data-placement="right" data-content="The content of the popover comes here.">flipXIn</a></li> |
A demo of animated modals
Similarly, the modal windows with animation are created by using the data-easein data attribute. The rest remains the same as creating other ordinary modal windows using the Bootstrap framework. See this demo page with a number of modal windows with different animation styles:
See online demo and code
The sample code for creating a modal with animation:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<a href="#myModal5" role="button" class="btn btn-default" data-toggle="modal">flipBounceYIn</a> <div id="myModal5" class="modal" data-easein="flipBounceYIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">The heading of the modal</h4> </div> <div class="modal-body"> <p>Content of the modal window like text or images to be placed here</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close me down</button> <button class="btn btn-primary">Save</button> </div> </div> </div> </div> |
You can see codes of all modal windows in the demo page.
List of values of animation
The following animation values can be set as creating a popover or modal window:
- fadeIn
- flipXIn
- flipYIn
- flipBounceXIn
- flipBounceYIn
- swoopIn
- whirlIn
- shrinkIn
- expandIn
- bounceIn
- bounceUpIn
- bounceDownIn
- bounceLeftIn
- bounceRightIn
- slideUpIn
- slideDownIn
- slideLeftIn
- slideRightIn
- slideUpBigIn
- slideDownBigIn
- slideLeftBigIn
- slideRightBigIn
- perspectiveUpIn
- perspectiveDownIn
- perspectiveLeftIn
- perspectiveRightIn
- tada
- flash
- pulse
- swing
- bounce
How to setup these popovers and modals into your website?
As your project is based on Bootstrap, so it is highly likely that you have included the CSS and JS files of Bootstrap along with a reference for the jQuery library. For creating animated popover and modals, you also need to include the references of velocity.min.js and velocity.ui.min.js.
One such CDN based links are shown below:
<script src=”https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.ui.min.js”></script>
Credit: Mike Sozanski