Fancy Inline Modal With jQuery And Animate.css - popup.js
File Size: | 6.7 KB |
---|---|
Views Total: | 1881 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.
<script src="/path/to/cdn/jquery.min.js"></script> <link rel="stylesheet" href="/path/to/cdn/animate.min.css" />
2. Insert your modal content together with a close button into the document.
<div id="myModal" class="myModal"> <!-- Modal Content Here --> <h3>Modal Title</h3> <p>Modal Body</p> <!-- Custom Close Button --> <b class="myModal-close js-popup-close">x</b> </div>
3. Download and include the popup.js
script after jQuery.
<script src="jquery.popup.min.js"></script>
4. Call the function to launch the modal popup on page load.
$('#myModal').popup();
5. Apply CSS styles to the modal popup.
.myModal { max-width: 600px; padding: 1em; background: #eee; display: none; position: relative; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15); }
6. Style the close button whatever you like.
.item-close { cursor: pointer; right: 5px; top: 5px; position: absolute; background: #222; color: #fff; border-radius: 100%; font-size: 14px; height: 24px; line-height: 22px; text-align: center; width: 24px; }
7. Apply fancy animations to the modal using Animate.css classes. Default: none.
$('#myModal').popup({ classAnimateShow: 'slideInUp', classAnimateHide: 'fadeOut' });
8. Specify the animation speed. Default: 400.
$('#myModal').popup({ time: 1000 });
9. Customize the appearance of the modal popup.
$('#myModal').popup({ background: "#000", position: "absolute", opacity: .5, zIndex: 123456788, });
10. Execute a callback function after the modal is closed.
$('#myModal').popup({ onPopupClose: function(e) { // do something } });
11. Execute a callback function on init.
$('#myModal').popup({ onPopupInit: function(e) { // do something } });
12. Close the modal popup manually.
$('#myModal').popup('close');
Changelog:
2021-05-07
- Bugfix
This awesome jQuery plugin is developed by romamaslennikov. For more Advanced Usages, please check the demo page or visit the official website.