LayerMC

by Park Mino

HTML

<!-- #mWrapper -->
<div id="mWrapper">
	<!-- #mHeader -->
	<div id="mHeader">
		Header
	</div>
	<!-- //#mHeader -->
	<!-- #mContainer -->
	<div id="mContainer">
		<div id="titConts">
			<h2 class="tit">바닥페이지</h2>
			<button type="button">Back Button</button>
		</div>
		<!-- #mContents -->
		<div id="mContents">
			<div style="background-color:#fff">
				테스트 페이지 <br>
				팝업 가이드용<br>
				팝업 가이드용<br>
				팝업 가이드용<br>
				팝업 가이드용<br>
				팝업 가이드용<br>
				팝업 가이드용<br>
				팝업 가이드용<br>
				팝업 가이드용<br>
				팝업 가이드용<br>
				팝업 가이드용<br>
				팝업 가이드용<br>
				팝업 가이드용<br>
				팝업 가이드용<br>
				<div class="btnBigArea twoSet">
					<button type="button" class="btnLightGary" onclick="common.oyFullOpen('oyFullOpen01');">full pop</button>
					<button type="button" class="btnGray" onclick="common.oyLayerOpen('oyLayerWrap01');">layer pop</button>
				</div>
				<div class="btnBigArea">
					<button type="button" class="btnGray" onclick="common.oyLayerOpen('oyLayerWrap02');">버튼 하단 고정</button>
				</div>
				팝업 가이드용<br>
				팝업 가이드용<br>
				팝업 가이드용<br>
				팝업 가이드용<br>
				팝업 가이드용<br>
				팝업 가이드용<br>
				팝업 가이드용<br>
				팝업 가이드용<br>
				팝업 가이드용<br>
				팝업 가이드용<br>
				팝업 가이드용<br>
				팝업 가이드용<br>
				팝업 가이드용<br>
				팝업 가이드용<br>
				팝업 가이드용<br>
				팝업 가이드용<br>
				팝업 가이드용<br>
			</div>
			

		</div>
		<!-- //#mContents -->
	</div>
	<!-- //#mContainer -->

	<!-- #mFooter -->
	<div id="mFooter">
		Footer
	</div>
	<!-- //#mFooter -->
</div>
<!-- //#mWrapper -->

<!--  Layer S -->
<div class="oyLayerWrap" id="oyLayerWrap01">
	<div class="oyLayerContainer">
		<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="btnBigArea btnType twoSet">
					<button type="button" class="btnLineGreen">취소</button>
					<button type="button" class="btnGreen">확인</button>
				</div>
				<div...

CSS

*{margin:0;padding:0;}
#mWrapper {width:100%;height:100%;}
#mHeader {z-index:11;width:100%;background:#fff;border-bottom:1px solid #e6e6e6;-webkit-transform:translateZ(0);}
#titConts {display:none;position:absolute;z-index:-1;left:-100%;overflow:hidden;visibility:hidden;width:0;height:0;padding:0;font-size:0;border:0;background:transparent;}
#titConts h2 {color:#000;font-size:18px;text-align:center;line-height:28px;font-weight:bold !important;}
#titConts button {position:absolute;top:14px;left:12px;width:20px;height:20px;background:#fff url(/mc-static-root/image/comm/btn_back_200702.png) no-repeat 50%;background-size:9px 19px;font-size:0;text-indent:-99999px;line-height:0;}


/* Layer */
.scrollOff{height:100%;overscroll-behavior:contain;touch-action:pan-down;}
.scrollfix{position:fixed;overflow:hidden;height:100%;overscroll-behavior:contain;touch-action:pan-down;}
.oyDimmed{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:1}
.oyLayerWrap{display:none;position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100vh;z-index:500;touch-action:none;}
.oyLayerWrap .oyLayerContainer{position:absolute;top:50%;left:15px;right:15px;background-color:#fff;border-radius:5px;z-index:5}
.oyLayerWrap .oyLayerContainer .oyHead{position:absolute;z-index:5;top:0;left:0;width:100%;;height:45px;padding:10px 15px;border-bottom:1px solid #f0f0f0;}
.oyLayerWrap .oyLayerContainer .oyHead .tit{padding-right:30px;font-size:16px;line-height:25px;color:#000;}
.oyLayerWrap .oyLayerContainer .oyHead .btnClose{position:absolute;top:13px;right:20px;width:18px;height:18px;background:url(/mc-static-root/image/comm/btn_pop_close.png) no-repeat 0 0;background-size:18px auto;text-indent:-9999px;}
.oyLayerWrap .oyLayerContainer .oyContents{position:relative;z-index:0;padding:45px 0 15px 0;overflow:hidden;}
.oyLayerWrap .oyLayerContainer .oyContents .oyCont{position:relative;padding:0...

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){
		var oylayId, oyPosY;
	    $htmlBody = $('html, body');
	    oyWrapper = $('#mWrapper');
	    
	    common.oylayId = $('#'+id);    
	    common.scrollOff();
	    common.dimShow();
	    common.oylayId.show();
	    common.popPos();
	},
	dimShow : function(){
	    common.oylayId.append('<div class="oyDimmed"></div>');
	    $('.oyDimmed').on('click', function(){
	        common.oyLayerClose(common.oylayId);
	    });
	},
	popPos : function(){
	    var height = $(window).height(),
	        lay = common.oylayId.children('.oyLayerContainer'),
	        layConts = common.oylayId.find('.oyContents'),
	        layContsh = layConts.height(),
	        layCont = lay.find('.oyCont'),
	        layConth = height-90,    
	        layh = lay.height(),
	        layhban = layh/2;
	    if(height<=layh){
	        if(layCont.hasClass('oyBtnFix')){
	            layCont.css({
					'max-height':layConth-70,
					'touch-action':'auto',
	            });
	            layhban = common.oylayId.children('.oyLayerContainer').height()/2
	        }else{
	            layCont.css({
					'max-height':layConth,
					'touch-action':'auto',
	            });
	            layhban = common.oylayId.children('.oyLayerContainer').height()/2
	        }
	    }
	    layCont.scrollTop(0);
	    lay.css('margin-top', -layhban);
	},
	oyLayerClose : function(id){
	    common.scrollOn();
	    common.oylayId.hide();
	    $('.oyDimmed').remove();
	},
	scrollOff : function(){
	    oyPosY = window.pageYOffset;
	    var varUA = navigator.userAgent.toLowerCase();
	    
	    if(common.oylayId.hasClass('oyFullLayer')){
	       ...