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

jQuery 레이어 팝업 라이브러리


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

출처 : 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 등.. 여러가지를 동적으로 부를수 있다. –>


3. 호출하기

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


$(function() {


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






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

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


    Pop it upExample 2a, custom settings: Simple jQuery popup with custom settings (Lazy popup, not going anywhere)

                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)
                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)
                fadeSpeed: 'slow', //can be a string ('slow'/'fast') or int
                followSpeed: 1500, //can be a string ('slow'/'fast') or int
                modalColor: 'greenYellow'

    Pop it upExample 3a, transitions: Simple jQuery popup with slide down transition and easing (Falling popup)

    	    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)
                speed: 650,
                transition: 'slideIn'
  • 4. EVENTS

    Pop it upExample 4, events: Simple jQuery popup that illustrates the different events (Events popup)

                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.

                loadUrl: 'test.html' //Uses jQuery.load()
  • Pop it upExample 5b, content: Simple jQuery popup that loads an image (Image popup)
                content:'image', //'ajax', 'iframe' or 'image'
  • Pop it upExample 5c, content: Simple jQuery popup that loads a page inside an iframe (Iframe popup)
                content:'iframe', //'ajax', 'iframe' or 'image'
                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'); 
                onOpen: function() {
                    content.html(self.data('bpopup') || '');
                onClose: function() {
  • 6. MISC

    Pop it upExample 6a, misc: Multiple jQuery popups (Never ending popup, how many can you pop up?)

                follow: [false, false] //x, y
                follow: [false, false] //x, y
                follow: [false, false] //x, y
  • Pop it upExample 6b, misc: Random jQuery popup (You never know what you get popup)