상세 컨텐츠

본문 제목

jQuery 레이어 팝업 라이브러리

프로그램개발/web

by fsteam 2014. 6. 13. 14:16

본문

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


출처 : 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()
            });
                    
  • " style="margin: 22px 5px 0px; padding: 6px 15px; border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; vertical-align: baseline; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; box-shadow: rgba(0, 0, 0, 0.298039) 0px 2px 3px; cursor: pointer; display: inline-block; text-align: center; float: right; background-color: rgb(43, 145, 175);">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({
                ???
            });


관련글 더보기