|
|
bPopup is a learning and exploring jQuery project. It's a lightweight cross browser jQuery popup plugin. It's not creating your popup but doing all the logic as opening, closing, centering on resize & scroll, creating a modal overlay etc. It can open any container you create with all kinds of content.
bPopup has been tested in IE67-9, FF2-7, Opera 9-10, Safari 4-5 and Chrome 4-15.
How to
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery.bpopup-x.x.x.min.js"></script> Html
<html>
<head> ... </head>
<body>
...
<!-- Button that triggers the popup -->
<button>POP IT UP</button>
<!-- Element to pop up -->
<div>Content of popup</div>
...
</body>
</html> CSS
element_to_pop_up { display:none; } JS
// 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()
$('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); JS custom settings
;(function($) {
$(function() {
$('button').bind('click', function(e) {
e.preventDefault();
$('element_to_pop_up').bPopup({
appendTo: 'form'
, zIndex: 2
, modalClose: false
});
});
});
})(jQuery); Example
1 - Simple jQuery modal popup with default settings
$('element_to_pop_up').bPopup();
2 - Simple jQuery popup with custom settings (Lazy popup, not going anywhere)
$('element_to_pop_up').bPopup({
follow: [false, false], //x, y
position: [150, 400] //x, y
}); 3 - Simple jQuery popup with custom settings (Jamaican popup, relax man)
$('element_to_pop_up').bPopup({
fadeSpeed: 'slow', //can be a string ('slow'/'fast') or int
followSpeed: 1500, //can be a string ('slow'/'fast') or int
modalColor: 'greenYellow'
}); 4 - Simple jQuery popup with custom settings part 3 (Sticky popup)
$('element_to_pop_up').bPopup({
modalClose: false,
opacity: 0.6,
positionStyle: 'fixed' //'fixed' or 'absolute'
}); 5 - Simple jQuery popup that illustrates the different events (Events popup)
$('element_to_pop_up').bPopup({
onOpen: function() { alert('onOpen fired'); },
onClose: function() { alert('onClose fired'); }
},
function() {
alert('Callback fired');
}); 6 - Simple jQuery popup that loads external html page with ajax. (Ajax popup)
$('element_to_pop_up').bPopup({
contentContainer:'.content',
loadUrl: 'test.html' //Uses jQuery.load()
}); 7 - Simple jQuery popup that loads a page inside an iframe (Iframe popup)
$('element_to_pop_up').bPopup({
content:'iframe', //'iframe' or 'ajax'
contentContainer:'.content',
loadUrl:'http://dinbror.dk/search' //Uses jQuery.load()
}); 8 - Simple jQuery popup that loads X content defined on the buttons data attribute (Content popup)
var self = $(this) //button
, content = $('.content');
$('element_to_pop_up').bPopup({
onOpen: function() {
content.html(self.data('bpopup') || '');
},
onClose: function() {
content.empty();
}
}); 9 - Multiple jQuery popups (Never ending popup, how many can you pop up?)
$('element_to_pop_up_1').bPopup({
closeClass:'close1',
follow: [false, false] //x, y
});
$('element_to_pop_up_2').bPopup({
closeClass:'close2',
follow: [false, false] //x, y
});
...
$('element_to_pop_up_N').bPopup({
closeClass:'closeN',
follow: [false, false] //x, y
}); source
demo
documentation
download
Tags: slider, modal, plugin, js, jquery, css, web, html, design, web developement
