모아보자 [기타] 모달창 가운데 띄우기 예제 웹개발팁
[기타] 모달창 가운데 띄우기 예제본문
테스트 브라우저
Chrome, Microsoft Edge, 네이버 웨일, Firefox, Brave, FlashPeak Slimjet, iexplore
다 잘되며, 모바일은 테스트 안해봤습니다.
<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>