jquery 를 이용해서 모달을 구현하고 브라우저 창 화면의 한 가운데에 띄우며
창 크기가 변경되어도 한 가운데에 계속 위치해 있다.
배경은 불투명으로 처리하며, 모달이나 불투명 배경을 클릭하면 닫는다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>okkks.tistory.com</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
.opacity_bg_layer {display:none;position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.5; filter:alpha(opacity=50); z-index:10;}
.layer_pop_center {position:fixed;background:yellowgreen;padding: 10px;z-index:11;}
</style>
<script type="text/javascript">
/* 불투명 배경 레이어 뛰우기 */
function opacity_bg_layer() {
if(!$('.opacity_bg_layer').length) {
$('<div class="opacity_bg_layer"></div>').appendTo($('body'));
}
var oj = $(".opacity_bg_layer");
// 화면의 가로, 세로 알아내기
var w = $(document).width();
var h = $(document).height();
oj.css({'width':w,'height':h}); // 불투명 배경 레이어 크기 설정
oj.fadeIn(500); // 불투명 배경 레이어 보이기 속도
}
/* 레이어 생성
cls : class
cont : 내용
기본 : 숨기기
*/
function layer_pop_crt(cls, cont) {
if(!cls) return false;
if(!$(cls).length) {
$('<div class="' + cls + '">' + cont + '</div>').appendTo($('body'));
}
return true;
}
/* 레이어 띄우기
oj : 레이어 객체
*/
function layer_pop_center(oj) {
if(!oj.length) return false;
oj.layer_pop_center_set();
}
/* 레이어 팝업 위치 설정 */
$.fn.layer_pop_center_set = function () {
//this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + $(window).scrollTop()) + "px");
//this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + $(window).scrollLeft()) + "px");
this.css("top", ($(window).height() - $(this).outerHeight())/2);
this.css("left", ($(window).width() - $(this).outerWidth())/2);
return this;
}
/* 레이어 닫기 후 삭제
oj : 레이어 객체
*/
function layer_pop_close(oj) {
if(oj.length) {
oj.fadeOut(500, function() {
oj.remove();
});
}
// 불투명 배경 레이어 삭제
var oj = $('.opacity_bg_layer');
if(oj.length) {
oj.fadeOut(500, function() {
oj.remove();
});
}
}
/* 화면을 불러온 후 처리 */
$(document).ready(function() {
var ly = 'layer_pop_center';
var _ly;
var ly_bg = $('.opacity_bg_layer');
$(document).on('click', '.layer_pop_center_show', function() { // 레이어 팝업 띄우기
if(!ly_bg.length) opacity_bg_layer(); // 불투명 배경 레이어 띄우기
var str_html = "okkks.tistory.com"; // 레이어 팝업 내용
if(layer_pop_crt(ly, str_html)) {
_ly = $('.' + ly); // 레이어 팝업 생성 후 재 선언
layer_pop_center(_ly);
_ly.fadeIn(500);
} else {
if(ly_bg.length) ly_bg.remove();
}
}).on('click', '.opacity_bg_layer', function() { // 불투명 배경 레이어를 클릭하면 닫기
layer_pop_close(_ly);
}).on('click', '.layer_pop_center', function(e) { // 레이어 팝업 닫기
if(_ly.length) layer_pop_close(_ly);
});
});
// 브라우저 창 크기 변경에 따른 처리
$(window).resize(function() {
var oj = $('.layer_pop_center');
if(oj.length) layer_pop_center(oj); // 레이어 팝업이 실행된 상태에서만 진행
if($('.opacity_bg_layer').length) opacity_bg_layer(); // 불투명 배경 레이어가 실행된 상태에서만 진행
});
</script>
</head>
<body>
<div><a href="http://okkks.tistory.com/1094" target="_blank">okkks.tistory.com</a></div>
<span><a href="http://okkks.tistory.com/1095" target="_blank">okkks.tistory.com</a></span>
<span><a href="http://okkks.tistory.com/1094" target="_blank">okkks.tistory.com</a></span>
<span><a href="http://okkks.tistory.com/1095" target="_blank">okkks.tistory.com</a></span>
<span><a href="http://okkks.tistory.com/1094" target="_blank">okkks.tistory.com</a></span>
<span><a href="http://okkks.tistory.com/1095" target="_blank">okkks.tistory.com</a></span>
<div><a href="http://okkks.tistory.com/1094" target="_blank">okkks.tistory.com</a></div>
<div><a href="#" class="layer_pop_center_show">모달 팝업 창 띄우기</a></div>
<div><a href="http://okkks.tistory.com/1095" target="_blank">okkks.tistory.com</a></div>
<div><a href="http://okkks.tistory.com/1094" target="_blank">okkks.tistory.com</a></div>
<div><a href="http://okkks.tistory.com/1095" target="_blank">okkks.tistory.com</a></div>
</body>
</html>
더보기>
- jquery 불투명 배경 레이어 띄우기 / javascript layer popup / modal popup window / jquery 모달 팝업창 만들기 구현
- jquery 레이어 팝업창 만들기 / 레이어 가운데 정렬 / div 정중앙 위치 / layer popup center 띄우기
