모달창 가운데 띄우기 예제 > 웹개발팁

 
<style> 
.layer-wrap {display:none;position:fixed;z-index:999;left:0;right:0;top:0;bottom:0;text-align:center;background-color: rgba(0, 0, 0, 0.5);} 
.layer-wrap:before {content:"";display:inline-block;height:100%;vertical-align:middle;margin-right:-.25em;} 
.pop-layer {display:inline-block;vertical-align:middle;width:400px;max-width:500px;height:auto;background:#fff;border:5px solid #3C8AF8;text-align:left;} 
.animate {-webkit-animation:animatezoom 0.6s;animation:animatezoom 0.6s;}  
@-webkit-keyframes animatezoom {from {-webkit-transform: scale(0)} to {-webkit-transform: scale(1)}}  
@keyframes animatezoom {from {transform: scale(0)} to {transform: scale(1)}}  
.layer_title {font-size:2em;background:#3C8AF8;color:#fff;padding:5px 10px;border-bottom:1px solid #888;}  
.pop-container {padding:20px;font-size:1.5em;line-height:1.5em;} 
.btn-Close {width:100%;margin-top:20px;padding-top:20px;border-top:1px solid #DDD;text-align:center;} 
a.layer-Close {display:inline-block;padding:2px 20px;background:#3C8AF8;font-size:1em;color:#fff;} 
</style> 
<a href="#layer" class="btn-layer">모달창 가운데 띄우기</a> 
<div id="layer" class="layer-wrap"> 
  <div class="pop-layer animate"> 
    <div class="layer_title">모달창</div> 
    <div class="pop-container"> 
      안녕하세요?<br>모아보자입니다.<br>좋은 하루입니다!<br>또 놀러 오세요!!<br>모달창 예제입니다!! 
      <div class="btn-Close"> 
        <a href="#" class="layer-Close">Close</a> 
      </div> 
    </div> 
  </div> 
</div> 
<script type="text/javascript"> 
$('.btn-layer').on('click', function() { 
var target = $(this).attr('href'); 
$(target).fadeIn(); 
}); 
$('.layer-wrap').on('click', function() {  
$('.layer-wrap').fadeOut();  
}); 
$('.layer-Close').on('click', function() { 
$('.layer-wrap').fadeOut(); 
}); 
</script>