본문으로 바로가기

웹 개발을 하다보면 팝업을 호출해야 할 경우가 매우 많다.

복잡한 기능을 수행하는 팝업 뿐 아니라, 상세 정보를 보여준다던가 혹은 단순히 사진 크게 보기 정도의 용도로도 팝업은 다양한 상황에서 필요하다.

이 때, 매우 간단하게 모달 레이어 팝업을 구현할 수 있는 제이쿼리 플러그인이 있어서 사용해 보았다.

바로 jquery.bpopup.js 플러그인이다.


간단하게 bPopup.js를 사용하여 레이어 팝업을 만들어 보고, 몇몇 옵션들에 대한 테스트를 해 보자.


우선 bPopup을 사용하기 위해서는 기본적으로 jQuery와 bPopup.js를 불러온다.

jQuery는 1.3.x 이상의 버전이 권장된다고 한다.


 bpopup 개발자의 사이트(http://dinbror.dk/bpopup/) 에서 플러그인을 다운받아 제이쿼리와 함께 불러온다.

1
2
3
<script src="js/jquery-3.1.1.min.js"></script>
<!-- Bpopup -->
<script src="js/plugins/bpopup/jquery.bpopup.min.js"></script>
cs


레이어 팝업으로 띄울 div를 적당한 크기로 간단하게 만들어 보자.

팝업 호출 없이는 보이지 않도록 기본적으로 display:none 처리를 해 줘야 한다.

1
2
3
4
5
<div id="bpopup1" style="display: none; background-color: white; width: 500px; height: 300px;">
   <p>
     bpopup 호출
   </p>
</div>
cs


만들어 놓은 팝업을 호출할 버튼을 만들어 놓고, 해당 버튼의 클릭 이벤트에 bpopup 함수를 사용해서 만들어 놓은 레이어 영역을 팝업으로 보여준다.

1
2
3
4
5
6
7
8
9
10
11
12
13
    <script type="text/javascript">
        var BPOPUP='';
        (function($) {
            $(function() {
                  $('#btest1').bind('click'function(e) {
                      e.preventDefault();
                      BPOPUP =  $('#bpopup1').bPopup({
                           modalClose : false
                       });
                    });    
             });
        })(jQuery);
    </script>  
cs


버튼을 클릭하면 모달 팝업 형태로 만들어 놓은 div 영역이 아래처럼 보여진다.



modalClose 옵션을 true로 주면, 부모 영역을 클릭하면 팝업이 사라진다.

기본적으로 esc 키를 누르면 팝업이 사라진다.


영역 자체를 숨겨뒀다가 해당 역역을 레이어 팝업으로 보여주는 것이기 때문에, 어떠한 형태로든 팝업을 만들어 낼 수 있다.

이미지를 올리던, 다른 HTML 코드를 올리던, 동영상을 띄우던 마음대로 사용하면 된다.

적당히 팝업 제목과 종료버튼을 만들어서 커스터마이징 해 봤다.

css class로 "b-close" 를 주면 클릭시 자동으로 popup이 종료된다.



팝업을 띄울때의 애니메이션 효과를 줄 수도 있고, 팝업 호출 전/후에 이벤트를 거는 옵션도 있다.

이러한 다양한 옵션들은 개발자 블로그(http://dinbror.dk/blog/bPopup/) 에서 상세하게 설명해 주니 개발시 참고하면 되겠다.


HTML 웹 개발에서 팝업을 띄울 수 있는 방법은 여러 가지가 있지만, 모바일 환경 등을 고려했을 때 모달 레이어 팝업이 가장 적합한 트랜드라고 생각한다.

이런 측면에서 제이쿼리 플러그인 bpopup.js는 괜찮은 플러그인이라고 할 수 있다.



 Other Contents 

댓글을 달아 주세요

티스토리 툴바