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 first image

 

 

demo
download

 

 

 

bPopup Source code :

[sociallocker]

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


$('#popup').bPopup();

 

HTML Code:


<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>

 

Script Code:

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


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

 

[/sociallocker]

bPopup can be customized with speed and transition.

 

bpopup sample

 

bPopup Speed and Transition Sample Code:


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

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

 

bPopup Transitions:

bPopup Transition NameDesc
transition: 'slideIn'Slide Left Popup
transition: 'slideUp'Slide Up popup
transition: 'slideDown'Slide Down popup
transition: 'slideBack'Slide Right popup

 

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

 

Output:

bPopup Main Output

bpopup output slidedown popup

 

 

jQuery Recommended Books:

 

713 total views, 5 views today

Leave a Reply

Your email address will not be published. Required fields are marked *