레이어 팝업

HTML마크업 구조는 아래 형식에서 벗어나지 않도록 합니다.
디자인에 따른 해당UI의 CSS는 서비스별로 다르게 적용 가능합니다.
DTD는 HTML 4.01 Transitional(loose.dtd)기준입니다.
웹접근성 향상을 위해, 키보드만으로도 동작 가능하며, 팝업으로 포커스가 자동 이동합니다.
키보드 사용자를 위해, esc키로도 팝업을 닫을 수 있도록 구현했습니다.

레이어 팝업 띄우기1

키보드 접근성 테스트용 링크

레이어 팝업 띄우기2

레이어 팝업

닫기

꼬라지가 좀....

레이어 팝업2

닫기

꼬라지가 좀....

코드 전체끄기

Html Code


<p><a href="#pop_id01" class="open_pop">레이어 팝업 띄우기</a></p>

<div id="pop_id01" class="layer_pop">
	<h4>레이어 팝업</h4>
	<p class="close_pop">닫기</p>
	<div class="cont_pop">
		<p>꼬라지가 좀....</p>
	</div>	
</div>

<div id="pop_ida" class="layer_pop">
	<h4>레이어 팝업2</h4>
	<p class="close_pop">닫기</p>
	<div class="cont_pop">
		<p>꼬라지가 그렇다....</p>
	</div>	
</div>

Css Code


.layer_pop {z-index:220; position:absolute; top:50%; left:50%; width:300px; border:1px solid #268dc7}
.layer_pop h4 {padding:8px 8px 8px 15px; color:#fff; background-color:#68b1da; font-size:11px; font-weight:900}
.layer_pop .cont_pop {padding:15px; background-color:#fff}
.layer_pop .close_pop {float:right; padding:0 5px; margin-top:-24px; color:#fff; cursor:pointer}
.curton.open {z-index:200; position:fixed; width:100%; height:100%; background-color:#000; 
	opacity:0.3;
	filter: alpha(opacity=30);
}

jQuery Code


jQuery.noConflict();
jQuery(function($){
	$('body').prepend("");
	var opener = $('.open_pop').attr('href');
	var openid = opener.replace('#','');		
	var pop = $('.layer_pop');
	pop.hide();//페이지 로딩시 팝업 숨기기
	$(".open_pop").click(openPop);//팝업 열기
	$(".close_pop").click(closePop); //팝업 닫기
	$(".curton").mousedown(closePop);//아무데나 클릭하면 팝업 닫기
	 // esc 키 누르면 팝업 닫힘
    $(document).keydown(function(event){
        if(event.keyCode == 27) closePop();
    });
	
	// 팝업 화면 가운데 위치하기
	function openPop(event) {
		var poptarget = $(this).attr('href').replace('#','');
		var popid = $('.layer_pop#'+poptarget);
		var popWidth = '-' + popid.width()/2 + 'px';
		var popHeight = '-' + popid.height()/2 + 'px';
		popid.fadeIn('fast');
		$('.curton').addClass('open');				
		popid.css({marginTop:popHeight, marginLeft:popWidth});
		//alert(popid.find('>h4').text());
		popid.find('>h4').text().focus(); // 팝업 열릴 때 포커스 이동. find 부분에 포커스 이동할 태그명을 입력하세요.
		return false;
	}
	function closePop(event) { 
		$('.curton').removeClass('open');
		pop.fadeOut('fast'); 
		return false;
	}
});