jQuery.bPopup.js
Quelle: http://dinbror.dk/bpopup/
Beispiele (jQuery.bPopup.js auf Jimdo-Webseiten)
- https://designtest-barcelona.jimdo.com/popup/
- https://designtest-barcelona.jimdo.com/popup/popup-gallery/
- https://designtest-barcelona.jimdo.com/popup/iframe-popup/
HowToDo
html
1. HELLO WORLD
Example 1, default: Simple jQuery modal popup with default settings (Hello World popup)
$('element_to_pop_up').bPopup();
html
2. CUSTOM SETTINGS
Example 2a, custom settings: Simple jQuery popup with custom settings (Lazy popup, not going anywhere)
$('element_to_pop_up').bPopup({
follow: [false, false], //x, y
position: [center, left] //x, y
});
Example 2b, custom settings:
Simple jQuery popup with custom settings part 2 (Sticky popup)
$('element_to_pop_up').bPopup({
modalClose: false,
opacity: 0.6,
positionStyle: 'fixed' //'fixed' or 'absolute'
});
Example 2c, custom
settings: Simple jQuery popup with custom settings part 3 (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'
});
html
3. TRANSITIONS
Example 3a, transitions: Simple jQuery popup with slide down transition and easing (Falling popup)
$('element_to_pop_up').bPopup({
easing: 'easeOutBack', //uses jQuery easing plugin
speed: 450,
transition: 'slideDown'
});
Example 3b,
transitions: Simple jQuery popup with slide in transition (Formula one popup)
$('element_to_pop_up').bPopup({
speed: 650,
transition: 'slideIn',
transitionClose: 'slideBack'
});
html
4. EVENTS
Example 4, events: 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');
});
html
5. CONTENT
Example 5a, content: Simple jQuery popup that loads external html page with ajax. (Ajax popup)Be aware that due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can't successfully retrieve data from a different domain, subdomain, or protocol.
$('element_to_pop_up').bPopup({
contentContainer:'.content',
loadUrl: 'test.html' //Uses jQuery.load()
});
Example 5b, content: Simple jQuery popup that loads an image (Image popup)
$('element_to_pop_up').bPopup({
content:'image', //'ajax', 'iframe' or 'image'
contentContainer:'.content',
loadUrl:'image.jpg'
});
Example 5c, content: Simple jQuery popup that loads a page inside an iframe (Iframe popup)
$('element_to_pop_up').bPopup({
content:'iframe', //'ajax', 'iframe' or 'image'
contentContainer:'.content',
loadUrl:'http://dinbror.dk/blog' //Uses jQuery.load()
});
Example 5d, content: 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();
}
});
html
6. MISC
Example 6a, misc: 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
});
Example 6b, misc: Autoclose jQuery popup (Notification
popup)
$('element_to_pop_up').bPopup({
autoClose: 1000 //Auto closes after 1000ms/1sec
});
Example 6c, misc: Random jQuery popup (You never know what you get popup)
$('element_to_pop_up').bPopup({
???
});
Images for Popup-Content (...copy path)
PopUp-Content and Scripts
PopUp-content - do not delete!
bPopup!
init event and append Element above to .popup-content
Use every Jimdo-Element as Popup!
append Element above to content1
b-popup scripts - do not delete!