bpopup 팝업 플러그인 예제

skip to content

demun(대문블로그)

• 티스토리
• 스킨수정
• 블로그
• Bootstrap
• Grunt
• SublimeText
• 방명록
• 연락처

bpopup 팝업 플러그인 예제

퍼블리셔/jQuery 2014/07/28 06:00

bPopup

bpopup 에 문의를 하는 경우가 많아 한번더 자세히 기술합니다.

이전 bpopup 에 대한 글

간단한 구문 한가지만 넣고 사용하면 어디에나 사용할 수 있을 듯 십습니다.

이 방법은 bpopup 홈페이지에서 사용하는 방법으로 보다 간단한 코드를 가지고 여러 상황에 맞게 사용할 수 있습니다.

먼저 폴더 구조는 아래와 같습니다.

├─html
│      bpopup.html
│      test.html
│
├─images
│      image.jpg
│
└─js
        jquery.bpopup.min.js

• html 폴더 : bpopup.html 에서 ajax 형식으로 test.html 을 불러옵니다.
• images 폴더 : image.jpg 가 있습니다. 유이의 이미지 입니다.
• js 폴더 : bpopup.min.js 가 있습니다.

이제 각 단계마다 삽입되는 구문입니다.

CSS

/* 팝업창이 보여질 부분 */
#popup, #popup2, .bMulti {
    background-color: #fff;
    color: #111;
    display: none;
    min-width: 450px;
    padding: 25px;
}

#popup, .bMulti {
    min-height: 250px;
}
/* 클릭할 버튼 */
.button {
    background-color: #2b91af;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
}
/* 닫기 버튼 */
.button.b-close, .button.bClose {
    box-shadow: none;
    font: bold 131% sans-serif;
    padding: 0 6px 2px;
    position: absolute;
    right: -7px;
    top: -7px;
}

html

총 4개로 분류되어 있습니다.

• 클릭할 html 요소
• 클릭해서 보여질 컨테이너 요소(문서하단에 숨김처리되서 포함됨)
• 삽입해야하는 자바스크립트
• 사용할려는 자바스크립트

클릭할 html 요소

<!-- default -->
<span class="button small pop1">Example 1:default</span>

<!-- easing plugin을 사용하는 예제 -->
<span class="button small pop1" data-bpopup='{"transition":"slideDown","speed":850,"easing":"easeOutBack"}'>Example 3a(transition,speed,easing)</span>

<!-- 'ajax', 'iframe' or 'image' 를 사용하는 예제- 여기서는 image 를 사용했습니다. -->
<span class="button small pop2" data-bpopup='{"content":"image","contentContainer":".content","loadUrl":"../images/image.jpg"}'>Example 5b(Image popup)</span>

클릭해서 보여질 컨테이너 요소(문서하단에 숨김처리되서 포함됨)

문서 하단에 레이어가 포함될 부분을 넣습니다.

위의 스타일을 보시면 아시겠지만 display: none; 으로 설정되어 있어 클릭하기전에는 안보입니다.

<div id="popup">는 처음부터 html이 포함된 것이고 <div id="popup2"> 는 html 을 다른곳에서 불러오기 위해 두개를 만들어서 사용합니다.

<div id="popup">
    <span class="button b-close"><span>X</span></span>
    <p>처음부터 팝업 문서에 포함되어 있는 div - 클릭시 레이어로 나옴.</p>
</div>
<div id="popup2">
    <span class="button b-close"><span>X</span></span>
    <div class="content"></div>
</div>

삽입해야하는 자바스크립트

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../js/jquery.bpopup.min.js"></script>
<script src="http:////cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

사용할려는 자바스크립트

;(function($) {
       $(function() {
           var $p1 = $('#popup'),
               $p2 = $('#popup2');
               // i = 0;

           $('body').on('click', '.small', function(e) {
               e.preventDefault();
               var popup = $(this).hasClass('pop1') ? $p1 : $p2,
                   content = $('.content'),
                   self = $(this);

               popup.bPopup(self.data('bpopup') || {});
        });

    });
})(jQuery);

팝업은 로컬컴퓨터에서는 안됩니다. 도메인이 있어야 합니다. 그래서 급히 제 도메인에 예제 파일을 만들어서 올렸으니 참고하시 바랍니다.

bPopup 예제