Small Popover & Modal Plugin For jQuery - popover.js
File Size: | 4.44 KB |
---|---|
Views Total: | 3159 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A really simple jQuery solution for popovers and modal windows that use CSS3 transitions for the smooth open/close animations.
How to use it:
1. Include the popover plugin and other required resources in the html file.
<link rel="stylesheet" href="popover.css"> <script src="//code.jquery.com/jquery.min.js"></script> <script src="popover.js"></script>
2. Create your own content for the popover & modal.
<div id="layer-demo" class="po__layer"> <a href="javascript:;">Item 1</a> <a href="javascript:;">Item 2</a> <a href="javascript:;">Item 3</a> <a href="javascript:;">Item 4</a> ... </div>
3. Create a trigger element to open the popup & modal. Note that the 'data-layer-id' attribute and content ID must have the same value.
<a class="trigger" href="javascript:;" data-layer-id="layer-demo">Trigger</a>
4. The JavaScript to enable the trigger element to open a basic popover when clicked.
$('.trigger').po();
5. The JavaScript to enable the trigger element to open a modal window instead.
$('.trigger').po({ modal: true });
6. Set the alignment relative to the trigger element.
$('.trigger').po({ // or 'left', 'right' alignment:'center' });
7. Set the top container for the background overlay of the modal window.
$('.trigger').po({ container:'body' });
This awesome jQuery plugin is developed by fafaz. For more Advanced Usages, please check the demo page or visit the official website.