LayerPC

by Park Mino

HTML

1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<button type="button" class="btnGray" onclick="common.oyLayerOpen('oyLayerWrap01',this);">layer pop</button>
1<br>
<button type="button" class="btnGray" onclick="common.oyLayerOpen('oyLayerWrap02');">layer pop2</button>
1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>

1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>


<!--  Layer S -->
<div class="oyLayerWrap" id="oyLayerWrap01">
	<div class="oyLayerContainer" style="width:500px;">
		<div class="oyHead">
			<h1 class="tit">레이어 타이틀</h1>
			<button class="btnClose" onclick="common.oyLayerClose('oyLayerWrap01');return false;">닫기</button>
		</div>
		<div class="oyContents">
			<div class="oyCont">
				1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
				<div class="area3sButton">
					<a href="#none" class="btnGray">구매취소</a>
					<a href="#none" class="btnGreen">배송지 변경</a>
				</div>
				1<br>2
			</div>
		</div>
	</div>
</div>
<div class="oyLayerWrap" id="oyLayerWrap02">
	<div class="oyLayerContainer" style="width:600px;">
		<div class="oyHead">
			<h1 class="tit">레이어 타이틀</h1>
			<button class="btnClose" onclick="common.oyLayerClose('oyLayerWrap02');return false;">닫기</button>
		</div>
		<div class="oyContents">
			<div class="oyCont oyBtnFix">
				1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
				1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1
				1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1
				1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1
				1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1
				1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1
			</div>
		</div>
	</div>
</div>
<!--  Layer E -->

CSS

/* oy 레이어팝업 S */
.oyDimmed{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:1}
.oyDimmed .btnLayClose{position:fixed;right:0;bottom:0;font-size:0;background:none;}
.oyDimmed .btnLayClose:focus{padding:10px 15px;font-size:14px;}
.oyLayerWrap{display:none;position:absolute;top:0;left:0;width:100%;height:100%;z-index:500;}
.oyLayerWrap .oyLayerContainer{position:absolute;top:50%;left:50%;padding:30px;background-color:#fff;border-radius:5px;z-index:5}
.oyLayerWrap .oyLayerContainer .oyHead{position:relative;height:45px;padding:0 0 15px;border-bottom: 2px solid #878787;}
.oyLayerWrap .oyLayerContainer .oyHead .tit{padding-right:30px;font-size:24px;line-height:28px;color:#4c4c4c;}
.oyLayerWrap .oyLayerContainer .oyHead .btnClose{position:absolute;top:0;right:0;width:23px;height:23px;background:url(/pc-static-root/image/comm/ico_close23x23.png) no-repeat 0 0;text-indent:-9999px;}

JavaScript

$.namespace = function() {
    var a = arguments, o = null, i, j, d;
    for (i = 0; i < a.length; i = i + 1) {
        d = a[i].split(".");
        o = window;
        for (j = 0; j < d.length; j = j + 1) {
            o[d[j]] = o[d[j]] || {};
            o = o[d[j]];
        }
    }
    return o;
};

$.namespace("common");
common = {

    //oy 레이어팝업 S	
	oyLayerOpen : function(id,e){
	    var oylayId;
	    $(e).addClass('btnthis');
	    common.oylayId = $('#'+id);    
		common.dimShow();
		common.oylayId.show();
		common.popPos();
		common.accFocus();	
	},
	dimShow : function(){
	    common.oylayId.append('<div class="oyDimmed"><button class="btnLayClose">닫기</button></div>')
	    $('.oyDimmed').on('click', function(){
	        common.oyLayerClose(common.oylayId);
		});
	},
	popPos : function(){
	    var height = $(window).height(),
	    	lay = common.oylayId.children('.oyLayerContainer'),
	    	layheight = lay.outerHeight(),
	    	layW = -(lay.outerWidth()/2),
	    	layH = -(lay.outerHeight()/2),
	    	scroll = $(window).scrollTop(),
	    	scroll2 = scroll + (height - lay.outerHeight())/2;
	    lay.css({marginLeft:layW});
	    if(height<=layheight){        
	        lay.css({top:scroll});
	    }else{
	        lay.css({top:scroll2});    
	    }
	},
	oyLayerClose : function(id){
	    common.oylayId.hide();
	    $('.oyDimmed').remove();
	    $('.btnthis').focus().removeClass('btnthis');
	},
	accFocus : function(){
		var close = $('.oyDimmed .btnLayClose'),
			layClose = $('.oyLayerWrap .btnClose'),			
			oyContainer = common.oylayId.find('.oyLayerContainer');
			oyContainer.attr('tabindex', '0').focus();    
		close.on('keydown', function(e){
			e = event || window.event;
			var keycode = e.keyCode || e.which;
			if(!e.shiftKey && keycode === 9){
			    oyContainer.attr('tabindex', '0').focus();            
			}
		});
		layClose.on('keydown', function(e){
			e = event || window.event;
			var keycode = e.keyCode || e.which;
			if(e.shiftKey && keycode ===...