레이어팝업

html.popOpen {overflow:hidden;}

.layer-popup {
							display:none;
							overflow:auto;
							position:fixed;
							top:0;
							right:0;
							bottom:0;
							left:0;
							z-index:100;
							padding:50px 50px 0;
							background-color:rgba(0,0,0,.6);
						}
						.layer-popup .popup {
							position:relative;
							width:800px;
							margin:0 auto 50px;
							box-sizing:border-box;
							background-color:#fff;
						}
						.layer-popup .btn-close {
							position:absolute;
							top:0;
							right:-50px;
							width:50px;
							height:50px;
							border:0;
							background-color:transparent;
							font-size:0;
							text-indent:-99999px;
							line-height:0;
							cursor:pointer;
						}
						.layer-popup .btn-close:before,
						.layer-popup .btn-close:after {
							content:'';
							position:absolute;
							top:50%;
							left:50%;
							width:34px;
							height:4px;
							background-color:#fff;
						}
						.layer-popup .btn-close:before {
							transform:translate(-50%,-50%) rotate(45deg);
						}
						.layer-popup .btn-close:after {
							transform:translate(-50%,-50%) rotate(135deg);
						}

/* 팝업오픈 */
						.layer-popup .popup {
							transform:scale(1.1);
							opacity:0;
						}
						.layer-popup.open .popup {
							transform:scale(1);
							opacity:1;
							transition:transform .3s, opacity .3s;
						}

$(window).on('load', function(){
							$(document).on('click', '.btnPop', function(){
								layerPop();

$(this).addClass('on');
								$('html').addClass('popOpen');

$(this).closest('.layer-popup').fadeOut(300, function(){
									$(this).removeClass('open');
								});
								var name = $(this).attr('layer-name');
								$('.layer-popup[layer-name=' + name + ']').fadeIn(100, function(){
									$(this).find('.firstTab').focus();
									$(this).addClass('open');
								});
							});

$(document).on('click', '.popClose', function(){
								popClose();
							});
						});

$(window).resize(function(){
							layerPop();
						});

// 레이어팝업 설정
						function layerPop(){
							$('.btnPop, .layer-popup').each(function(){
								var tit = $(this).attr('title');
								$(this).attr('layer-name', tit).removeAttr('title');
							});

$('.layer-popup').each(function(){
								$(this).find('.tabIdx').remove();

var hei = $(this).outerHeight();
								var popH = $(this).find('.popup').outerHeight();
								var pdT = (hei - popH) / 2;
								var mgB = $(this).find('.popup').css('margin-bottom');
								var space = mgB.replace(/px/g, '') * 2;

if(hei - space < popH){
									$(this).css({'padding-top':mgB});
								}else{
									$(this).css({'padding-top':pdT});
								}

//키보드접근성
								$(this).prepend('<span class="tabIdx" tabindex="0">탭</span>');
								$(this).append('<span class="tabIdx" tabindex="0">탭</span>');
								$(this).find('.tabIdx').css({
									'position':'absolute',
									'top':'-99999px',
									'left':'-99999px',
									'font-size':'0',
									'text-indent':'-99999px',
									'line-height':'0'
								});

$(this).find('.tabIdx:first-child').focus(function(){
									$(this).closest('.layer-popup').find('.lastTab').focus();
								});
								$(this).find('.tabIdx:last-child').focus(function(){
									$(this).closest('.layer-popup').find('.firstTab').focus();
								});
							});

$('.layer-popup').scroll(function(){
								var sTop = $(this).scrollTop();

$(this).find('.btn-close').css({'top':sTop});
							});
						}

// 레이어팝업 닫기
						function popClose(){
							var spd = '300';
							$('.layer-popup').each(function(){
								$(this).removeClass('open').scrollTop(0).fadeOut(spd, function(){
									$('.btnPop.on').focus().removeClass('on');
									
								});
							});
							setTimeout(function(){
								$('html').removeClass('popOpen');
							}, spd);
						}

레이어 팝업

예제

코드

- html

- css

- script