Lightweight jQuery Modal Popup Plugin - bPopup

bPopup is a lightweight (~1.4 kb gzipped) jQuery plugin that provides you with all the logic like opening, closing, centering on resize & scroll, creating a modal overlay etc.  It can popup with any HTML elements like video, text, and image, so that you can create various pop windows using CSS and HTML to fit you need.

You might also like:

• Neat and Clean Modal Plugin with jQuery - wModal
• Minimalist & Flexible jQuery Modal Plugin - jqModal
• Advanced Modal Plugin with jQuery - Impromptu
• An Easy-To-Use jQuery Modals Plugin - Reveal
• Modal Boxes & Popups Plugin - Avgrund Modal
• Modern Modal Dialogs - ModalBox
• Lightweight Modal Dialog Plugin - SimpleModal
• Modal Dialog Windows Plugin - leanModal
• SimpleModal - Beautiful Popup Window Plugin

Basic Usage:

1. Include jQuery Library and bPopup.js

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.bpopup-0.8.0.min.js"></script>

2. Markup

<!-- Button that triggers the popup -->
<button id="my-button">POP IT UP</button>
<!-- Element to pop up -->
<div id="element_to_pop_up">Content of popup</div>

3. Hide the popup content

<style type="text/css">
 #element_to_pop_up { display:none; }
</style>

4. Call the function

// Semicolon (;) to ensure closing of earlier scripting
// Encapsulation
// $ is assigned to jQuery
;(function($) {

 // DOM Ready
$(function() {

// Binding a click event
// From jQuery v.1.7.0 use .on() instead of .bind()
$('#my-button').bind('click', function(e) {

// Prevents the default action to be triggered. 
e.preventDefault();

// Triggering bPopup when click event is fired
$('#element_to_pop_up').bPopup();

});

});

})(jQuery);

Change Logs:

v0.11.0 (2015-01-24)

• Fixed: Using fallback width as default to fix the width issue when scrollbar visible.
• Fixed: "insideWindow" function updated so it now checks if height OR width is inside window instead of only width AND height.

v0.10.0 (2014-07-23)

• Bugfix: autoClose will not trigger if you close the popup before it times out.
• Added: reposition(animateSpeed), a public function that recalculates the center position of the popup. You can pass an optional animate speed attribute. If not defined it will use the followSpeed value (#8). 
• Added: Error handling when loading content with ajax. The first argument in the loadCallback is the status of the ajax request, success or error
• Added: bower.json

v0.9.4 (2013-08-20)

• Added: New transitions, slideUp and slideBack.
• Added: transitionClose, gives you the possibility to use a different transition on close.
• Added: autoClose, thanks to Leonidaz for the suggestion.
• Added: iframeAttr, so you now can control what attributes the iframe should have (and enable the scrollbar as many of you wants).
• Removed: The minimum 20px gap at the top. It's 0 now.

v0.9.3 (2013-03-25)

• Transition fix: Unbinding events earlier on close to prevent scroll/resize events triggered when closing the popup and using the "slideIn" or "slideDown" transition.
• Transition fix: The public close function didn't close the popup when using the "slideIn" or "slideDown" transition.
• Transition fix: Exit transition for "slideIn" and "slideDown" will now always slide graceful no matter how much you have scrolled.
• Transition fix: Fixed odd behavior when using "slideIn" or "slideDown" with ajax calls.

---

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