Small Popover & Modal Plugin For jQuery - popover.js

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.