This time I will share jQuery Plugin and tutorial about Fancy Inline Modal With jQuery And Animate.css – popup.js, hope it will help you in programming stack.
popup.js is a super tiny jQuery plugin to create a static inline modal popup with fancy CSS3 transitions based on Animate.css library.
How to use it:
1. Load the necessary jQuery library and animate.css from a CDN.
1 |
<script src="/path/to/cdn/jquery.min.js"></script> |
2 |
<link rel="stylesheet" href="/path/to/cdn/animate.min.css" /> |
2. Insert your modal content together with a close button into the document.
6 |
<b class="myModal-close js-popup-close">x</b> |
3. Download and include the popup.js script after jQuery.
1 |
<script src="jquery.popup.min.js"></script> |
4. Call the function to launch the modal popup on page load.
5. Apply CSS styles to the modal popup.
7 |
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15); |
6. Style the close button whatever you like.
7. Apply fancy animations to the modal using Animate.css classes. Default: none.
2 |
classAnimateShow: 'slideInUp', |
3 |
classAnimateHide: 'fadeOut' |
8. Specify the animation speed. Default: 400.
9. Customize the appearance of the modal popup.
10. Execute a callback function after the modal is closed.
2 |
onPopupClose: function(e) { |
11. Execute a callback function on init.
2 |
onPopupInit: function(e) { |
12. Close the modal popup manually.
1 |
$('#myModal').popup('close'); |
This awesome jQuery plugin is developed by romamaslennikov. For more Advanced Usages, please check the demo page or visit the official website.
