jQuery 레이어 팝업 라이브러리

1. HELLO WORLD

Pop it upExample 1, default: Simple jQuery modal popup with default settings (Hello World popup)

        $('element_to_pop_up').bPopup();

2. CUSTOM SETTINGS

Pop it upExample 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: [150, 400] //x, y
        });

        $('element_to_pop_up').bPopup({
            modalClose: false,
            opacity: 0.6,
            positionStyle: 'fixed' //'fixed' or 'absolute'
        });

        $('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'
        });

3. TRANSITIONS

Pop it upExample 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'
        });

        $('element_to_pop_up').bPopup({
            speed: 650,
            transition: 'slideIn'
        });

4. EVENTS

Pop it upExample 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');
        });

5. CONTENT

Pop it upExample 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()
        });

        $('element_to_pop_up').bPopup({
            content:'image', //'ajax', 'iframe' or 'image'
            contentContainer:'.content',
            loadUrl:'image.jpg'
        });

        $('element_to_pop_up').bPopup({
            content:'iframe', //'ajax', 'iframe' or 'image'
            contentContainer:'.content',
            loadUrl:'http://dinbror.dk/search' //Uses jQuery.load()
        });

        var self = $(this) //button
        , content = $('.content'); 
        
        $('element_to_pop_up').bPopup({
            onOpen: function() {
                content.html(self.data('bpopup') || '');
            },
            onClose: function() {
                content.empty();
            }
        });

6. MISC

Pop it upExample 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
        });

        $('element_to_pop_up').bPopup({
            ???
        });