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

</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({
              ???
          });