article:
Foundation 3 - advanced responsive front-end framework
article:
Tutorial: 3D Thumbnail Hover Effects with CSS3 and jQuery

Modal Plugin: bPopup

Advertisement

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.

Modal Plugin: bPopup

bPopup has been tested in IE67-9, FF2-7, Opera 9-10, Safari 4-5 and Chrome 4-15.

Modal Plugin: bPopup


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

Advertisement
Tags: slider, modal, plugin, js, jquery, css, web, html, design, web developement

Leave a Comment

No Comment

© Creative3x Ltd.