Home » Blog » jQuery 레이어 팝업 라이브러리

jQuery 레이어 팝업 라이브러리

http://fsteam.tistory.com/72

웹페이지에서 레이어 팝업을 쉽게 쓸수 있는 라이브러리를 찾았다.

출처 : http://dinbror.dk/bpopup/

사용법은 아주 간단하다.

1. 라이브러리 include

<script src=’http://code.jquery.com/jquery-1.8.3.js’></script>

<script type=’text/javascript’ src=’jquery.bpopup.min.js’></script>

2. 팝업이 뜰 div 지정

<div id=’pop_up_banner’ style=’display:none; width:200px’>

<span class=’button b-close’ style=’border-radius:7px 7px 7px 7px;box-shadow:none;font:bold 131% sans-serif;padding:0 6px 2px;position:absolute;right:-7px;top:-7px; background-color:#2b91af; color:#fff; cursor: pointer; display: inline-block; text-align: center;’><span>X</span></span> <!– 닫기 버튼 (스타일은 알아서 지정) –>

<div class=’content’></div> <!– 컨텐츠가 들어갈 영역 지정 (이미지, html 등.. 여러가지를 동적으로 부를수 있다. –>

</div>

3. 호출하기

나는 배너 이미지를 띄워 보았다.

<script>

$(function() {

$(‘#pop_up_banner’).bPopup({

content:’image’, //’ajax’, ‘iframe’ or ‘image’

contentContainer:’.content’,

loadUrl:’banner.jpg’

});

});

</script>”;

이미지로 배너가 뜨는 모습은 아래와 같다.
아래는 다양한 사용법에 대한 예시

  • 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
        });
  • Pop it upExample 2b, custom settings: Simple jQuery popup with custom settings part 2 (Sticky popup) 
            $('element_to_pop_up').bPopup({
            modalClose: false,
            opacity: 0.6,
            positionStyle: 'fixed' //'fixed' or 'absolute'
        });
  • Pop it upExample 2c, custom settings: Simple jQuery popup with custom settings part 3 (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'
        });

  • 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'
        });
  • Pop it upExample 3b, transitions: Simple jQuery popup with slide in transition (Formula one popup) 
            $('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()
        });
  • Pop it upExample 5b, content: Simple jQuery popup that loads an image (Image popup) 
            $('element_to_pop_up').bPopup({
            content:'image', //'ajax', 'iframe' or 'image'
            contentContainer:'.content',
            loadUrl:'image.jpg'
        });
  • Pop it upExample 5c, content: Simple jQuery popup that loads a page inside an iframe (Iframe popup) 
            $('element_to_pop_up').bPopup({
            content:'iframe', //'ajax', 'iframe' or 'image'
            contentContainer:'.content',
            loadUrl:'http://dinbror.dk/search' //Uses jQuery.load()
        });
  • Pop a videoPop an imagePop some textExample 5d, content: 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();
            }
        });

  • 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
        });
  • Pop it upExample 6b, misc: Random jQuery popup (You never know what you get popup) 
            $('element_to_pop_up').bPopup({
            ???
        });
Blog, Tech