모달팝업

HTML

<a href="#" class="btn-example" onclick="layer_open('layer2');return false;">click</a>

<div class="sample-modal">
	<div class="bg"></div>
  <div class="sample-modal__inner" id="layer2">
    <div class="sample-modal__header">
      <h5 class="sample-modal__title">팝업 title</h5>
    </div>
    <div class="sample-modal__contents">
        <!--content //-->
        <p class="ctxt">Thank you.<br>
          popup popup popup popup popup
          popup popup popup popup popup
          popup popup popup popup popup
        </p>
        <!--// content-->
    </div>
    <div class="modal__buttons list-col2">
      <a href="#" class="button">확인</a>
      <a href="#" class="button blue">취소</a>
    </div>
    <button type="button" class="modal__close">
      닫기
    </button>
  </div>
</div>

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/redmond/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>

 

CSS

.sample-modal {display:none; position:fixed; _position:absolute; top:0; left:0; width:100%; height:100%; z-index:100;}
.sample-modal .bg {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.5; filter:alpha(opacity=50);}
.sample-modal .sample-modal__inner {display:block;}

.sample-modal__inner {display:none; position: absolute; top: 50%; left: 50%; width: 410px; height:auto; padding: 28px 12px 12px; background-color:#fff; box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.16);overflow: hidden; z-index: 10;}
.sample-modal__contents {margin: 10px 0 0 0;}
.sample-modal__inner p.ctxt {color: #666; line-height: 25px;}

.sample-modal__header {position: relative;text-align: center;}
.sample-modal__header .sample-modal__title {margin: 0; font-size: 16px;font-weight: 700;text-align: left;word-break: break-all;}

.button {display: inline-flex;align-items: center;justify-content: center;width: auto;height: 41px;border-radius: 5px;padding: 0 16px;border: 1px solid #d9d9d9;background-color: #fff;box-sizing: border-box;text-align: center;font-size: 14px;font-weight: 400;}
.modal__buttons {display: flex;justify-content: space-between;margin:10px;}
.modal__close {position: absolute;top: 20px;right: 20px;display: inline-block;height: 25px;padding: 0 14px 0;background-color: #3f5a9d;font-size: 13px;color: #fff;cursor: pointer;}
.modal__close:hover {background-color:#1f326a; color:#fff;}
.list-col2 .button {width: 48.5%;}

 

script

 function layer_open(el){
  var temp = $('#' + el);
  var bg = temp.prev().hasClass('bg'); //dimmed 레이어를 감지하기 위한 boolean 변수
  if(bg){
   $('.sample-modal').fadeIn(); //'bg' 클래스가 존재하면 레이어가 나sample-modal타나고 배경은 dimmed 된다.
  }else{
   temp.fadeIn();
  }

  // 화면의 중앙에 레이어를 띄운다.
  if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');
  else temp.css('top', '0px');
  if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');
  else temp.css('left', '0px');

  console.log(temp);

  temp.find('.modal__close').click(function(e){
   if(bg){
    $('.sample-modal').fadeOut(); //'bg' 클래스가 존재하면 레이어를 사라지게 한다.
   }else{
    temp.fadeOut();
   }
   e.preventDefault();
  });

  $('.sample-modal .bg').click(function(e){ //배경을 클릭하면 레이어를 사라지게 하는 이벤트 핸들러
   $('.sample-modal').fadeOut();
   e.preventDefault();
  });
 }

 

코드 확인

https://codepen.io/csvhixfk-the-scripter/pen/poQPyov