bPopup Demonstration

bPopup is a simple but efficient jquery modal popup plugin. It requires jquery 1.3+ and has been tested in Internet Explorer 6-9, Firefox 2-7, Opera 9-10, Safari 4-5 and Chrome 4-12. For a full list of settings, changes, comments and to download the plugin go to http://dinbror.dk/blog/bPopup

Example 1, default: Simple jquery modal popup with default settings

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

Example 2a, custom settings: Simple jquery popup with custom settings (Lazy popup, not going anywhere)

        $('#selector_to_popup')
            .bPopup({follow:[false,false,false], position:[20,20]});

Example 2b, custom settings: Simple jquery popup with custom settings part 2 (Fresh popup, slow and easy)

        $('#selector_to_popup')
            .bPopup({fadeSpeed:'slow', modalColor:'yellowGreen', scrollBar:false});

Example 2c, custom settings: Simple jquery popup with custom settings part 3 (Sticky popup, dark and fixed)

        $('#selector_to_popup')
            .bPopup({fadeSpeed:1, follow:[true,true,true], opacity:0.9, modalClose:false});

Example 3, events: Simple jquery popup that illustrates the different events.

        $('#selector_to_popup')
            .bPopup({onOpen: function(){ alert('onOpen fired'); }, 
                     onClose: function(){ alert('onClose fired'); }}, 
             function() {
                 alert('Callback fired');
            });

Example 4a, content: Simple jquery popup that loads outside html page with ajax

        $('#selector_to_popup')
            .bPopup({loadUrl:$(this).attr('href')});

Example 4b, content: Simple jquery popup that loads outside paragraph from html page with ajax

        $('#selector_to_popup')
            .bPopup({contentContainer:'#pContent', loadUrl:'test.html p'});

Example 4c, content: Simple jquery popup that loads a page inside an iframe

        $('#selector_to_popup')
            .bPopup({content:'iframe', contentContainer:'#pContent',
                    loadUrl:'http://dinbror.dk/search'});

Example 5a, misc: Simple jquery x-link popup

        var t = $(this);
        $('#selector_to_popup')
            .bPopup({ onOpen: function () {
                $('#bContinue')
                    .attr({ 'href': t.attr('href') })
                    .find('.btnLink').text(t.attr('title'));
                }
            });

Example 5b, misc: Multiple fixed popups (The never ending story, how many can you open?)

        $('#selector_to_popup1').bPopup({ closeClass: 'close1' });
        $('#selector_to_popup2').bPopup({ closeClass: 'close2' });
        .
        .
        .
        $('#selector_to_popupN').bPopup({ closeClass: 'closeN' });

Download bPopup here

X