jQuery bPopup Examples

jQuery bPopup Examples:

 

Popups are playing the major interactive role in web designings. Popup can be used to persist the user in the same page or To provide information in the most interactive effective way.

Popup can be shown using 50 plus jquery plugins. Today we are going to see how to display the plugin using the bpopup plugin.

 

 

 

 

 

 

bPopup Source code :

[sociallocker]

bPopup will display the div as popup. Div id should be called with the bPopup function.

[plain]

$(‘#popup’).bPopup();

[/plain]

 

HTML Code:

[html]

<div id=”popup” style=”display: none;”>
<span class=”button b-close”><span>X</span></span>
bPopup Example<br />
<span class=”logo”>Javadomain.in</span>
</div>
<button id=”pop” class=”button_styles”>bPopup</button>

[/html]

 

Script Code:

Onclick of bPopup button, div id=”popup” will be displayed as bpopup.

[html]

$(function(){
$(‘#pop’).click(function(){
$(‘#popup’).bPopup();
});
});

[/html]

 

[/sociallocker]

bPopup can be customized with speed and transition.

 

 

bPopup Speed and Transition Sample Code:

[html]

$(function(){
$(‘#pop’).click(function(){
$(‘#popup’).bPopup({
easing: ‘easeOutBack’, //uses jQuery easing plugin
speed: 1050,
transition: ‘slideDown’
});
});
});

[/html]

The above code will open the popup in slow speed and open from top.

 

bPopup Transitions:

[table id=1 /]

 

Transition close is the property where the transition of the popup should be closed onclick of close icon.

 

Output:

 

 

jQuery Recommended Books: