jQuery와 CSS를 이용한 간단한 팝업 레이어

HTML 문서 내에서 팝업 레이어를 띄울 때 여러 가지 방법을 쓸 수 있다. 자바스크립트로 일일이 만들 수도 있고, jQuery UI나 jQuery Tools 같은 통합 라이브러리나 전용 플러그인도 많다. 효과나 기능도 무척 다양해서 입맛대로 골라 쓰면 된다.

내 경우엔 jQuery Tools를 애용했었는데, 가장 처음 접한 라이브러리이기도 하고 필요로 하는 기능들이 대부분 구현되어 있었기 때문이다. 특히 홈페이지의 데모와 코드설명이 쉽고 간단하게 되어있어 많은 도움이 되었다.

최근에는 정말 간단한 팝업 레이어 기능만 필요하기 때문에 그냥 jQuery로 직접 레이어를 열고 닫는 식으로 쓰고 있다. 정리와 기록 차원에서 적어둔다.

 

HTML

<div id="overlay_t"></div>
<div id="popup_layer">팝업레이어의 내용</div>

#overlay_t 는 팝업 레이어가 열릴 때 배경으로 열리는 반투명 레이어다. 기존 문서를 반쯤 어둡게/밝게 처리해서 팝업 레이어의 주목도를 높인다.

#popup_layer 안에는 팝업 레이어의 내용을 넣는다.

 

CSS

#overlay_t { background-color: #000; bottom: 0; left: 0; opacity: 0.5; filter: alpha(opacity = 50); /* IE7 & 8 */ position: fixed; right: 0; top: 0; z-index: 99; display:none;}

#popup_layer { width:400px; margin-bottom:30px; background:#fff; border:solid 1px #ccc; position:absolute; top:260px; left:50%; margin-left:-200px; box-shadow: 0px 1px 20px #333; z-index:100; display:none;}

#overlay_t 는 주로 반투명 검정색으로 많이 쓰기 때문에 배경색과 투명도를 지정해야 한다. z-index는 팝업레이어보다 한 단계 낮게 설정.

#popup_layer 는 대강 모양만 잡아주자. 배경색 지정을 까먹으면 레이어 안의 요소들만 둥둥 떠다니게 되니까 주의. 높이값(top)은 jQuery로 잡을테니 대충 넣자.

 

jQuery

$( document ).ready(function() {
       $('.trigger').click(function(){
        $('#popup_layer, #overlay_t').show();
        $('#popup_layer').css("top", Math.max(0, $(window).scrollTop() + 100) + "px");
        // $('#popup_layer').css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + $(window).scrollTop()) + "px");
    });
    $('#overlay_t, .close').click(function(e){
        e.preventDefault();
        $('#popup_layer, #overlay_t').hide();
    });
});

트리거를 클릭하면 팝업 레이어와 반투명 배경을 보이게 한다(show). 팝업 레이어의 높이값은 '현재 보고있는 화면에서 상단 100px 아래'에 위치하도록 설정했다. 주석 처리된 부분은 '현재 보고있는 화면 높이값에서 레이어의 높이값/2 한 값을 뺀' 위치에 오도록 설정한 것이다. 만약 현재 보고있는 화면의 위치와 상관없이 HTML 문서 전체 높이값을 기준으로 레이어를 띄운다면, 그냥 CSS에서 top 값을 지정해주면 된다.

팝업 레이어의 뒤에 위치한 반투명 레이어를 클릭하면 반투명 레이어와 팝업 레이어가 둘 다 사라지도록 설정했다. .close라는 클래스를 가진 버튼을 클릭해도 닫히도록 했다. 팝업 레이어 안에 '닫기'나 'x' 란 이름으로 닫기 버튼을 만들어두면 된다.

 

데모

트리거

팝업 레이어의 내용 레이어 닫기