Animated Popover/Popout Plugin For jQuery & jQuery UI - MLB Popout

MLB Popout is a jQuery plugin to create animated & touch-enabled popovers that are triggered by a click/touch and can display larger amounts of information as a result. They are closed when the trigger is clicked for a second time, the body of the page is clicked (area outside of active popover), or the "ESC" key is pressed. The plugin requires jQuery 1.7+, jQuery UI 1.8+ and Modernizr for feature detection of translate3d css transform support.

How to use it:

1. Load jQuery library together with jQuery UI and modernizr.js at the bottom of the document.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>

2. Load the jQuery MLB popout plugin's JS and CSS files in the document. Make sure the mlb-popout.js script is loaded after loading jQuery library.

<link rel="stylesheet" href="css/mlb-popout.css">

3. Call the plugin on the trigger element to generate a popover. After a popover is generated, a separate div is created with a 'popout' class and is attached at the bottom of the DOM by default. The contents of the popover are specified on initialization but can be updated by calling the 'sContent' option on the original element and specifying updated contents. For best results, style your triggering element with the 'active' class that is added when a popover is made visible through a pointer interaction.

$('#trigger-element').popout({ ... });

4. Available options.

// Construct for poput, if none provided iterate by 1
sName: null, 

// Content
sContent: 'Please add content to your popout.', 

// Add these classes to your generated popout
asClasses: null, 

// Should the popout use css animations?
bAnimate: true, 

// Is your popout positioned inside of a fixed element?  
// Calculate the "top" position differently
bFixedWrapper: false, 

 // Apply inline width to popout
sWidth: 'auto',

// Apply inline height to popout
sHeight: 'auto', 

// Append popout here.  This is useful for housekeeping.
sAppendTo: 'body', 

// Detect touch device
bTouchDevice: Modernizr.touch, 

// callbacks
fnInitComplete: null, 
fnOnShow: null,
fnOnHide: null,

5. Public methods.

// position
$('#trigger').popout('position');

// Close all popovers. 
$('#trigger').popout('hide');

// Remove all traces of an instance of a popover.
$('#trigger').popout('destroy');

---

This awesome jQuery plugin is developed by Cornally. For more Advanced Usages, please check the demo page or visit the official website.