div 레이어를 화면의 한가운데에 팝업창처럼 띄우기로
브라우저 창 크기가 변경되어도 정중앙에 계속 위치해 있다.
<!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>
.layer_pop_center {background:yellowgreen;padding: 10px;}
</style>
<script type="text/javascript">
/* 레이어 생성
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 || !$(oj).length) return false;
oj.layer_pop_center_set();
}
/* 레이어 팝업 위치 설정 */
$.fn.layer_pop_center_set = function () {
this.css("position", "fixed");
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("z-index", "11");
return this;
}
/* 레이어 닫기 후 삭제
ly : 레이어 (예> '.layer_pop_center')
*/
function layer_pop_close(ly) {
if($(ly).length) {
$(ly).fadeOut(500, function() {
$(ly).remove();
});
}
}
/* 화면을 불러온 후 처리 */
$(document).ready(function() {
var ly = 'layer_pop_center';
var ly_ = '.' + ly;
$(document).on('click', '.layer_pop_center_show', function() {
var str_html = "레이어 한가운데 띄우기"; // 레이어 팝업 내용
if(layer_pop_crt(ly, str_html)) {
layer_pop_center($(ly_));
$(ly_).fadeIn(500);
}
}).keyup(function(e) { // 레이어 팝업 닫기 : esc 키
if(e.keyCode == 27) layer_pop_close(ly_);
}).on('click', '.layer_pop_center', function(e) { // 레이어 팝업 닫기
if($(ly_).length) layer_pop_close(ly_);
});
});
// 브라우저 창 크기 변경에 따른 처리
$(window).resize(function() {
var ly = '.layer_pop_center';
if($(ly).length) layer_pop_center($(ly)); // 레이어 팝업이 실행된 상태에서만 진행
});
</script>
</head>
<body>
<div><a href="http://okkks.tistory.com" target="_blank">okkks.tistory.com</a></div>
<span><a href="http://okkks.tistory.com" target="_blank">okkks.tistory.com</a></span>
<span><a href="http://okkks.tistory.com" target="_blank">okkks.tistory.com</a></span>
<span><a href="http://okkks.tistory.com" target="_blank">okkks.tistory.com</a></span>
<span><a href="http://okkks.tistory.com" target="_blank">okkks.tistory.com</a></span>
<span><a href="http://okkks.tistory.com" target="_blank">okkks.tistory.com</a></span>
<span><a href="http://okkks.tistory.com" target="_blank">okkks.tistory.com</a></span>
<span><a href="http://okkks.tistory.com" target="_blank">okkks.tistory.com</a></span>
<div><a href="http://okkks.tistory.com" target="_blank">okkks.tistory.com</a></div>
<div><a href="http://okkks.tistory.com" target="_blank">okkks.tistory.com</a></div>
<div><a href="http://okkks.tistory.com" target="_blank">okkks.tistory.com</a></div>
<div><a href="#" class="layer_pop_center_show">레이어 한가운데 띄우기</a></div>
<div><a href="http://okkks.tistory.com" target="_blank">okkks.tistory.com</a></div>
<div><a href="http://okkks.tistory.com" target="_blank">okkks.tistory.com</a></div>
<div><a href="http://okkks.tistory.com" target="_blank">okkks.tistory.com</a></div>
<div><a href="http://okkks.tistory.com" target="_blank">okkks.tistory.com</a></div>
<div><a href="http://okkks.tistory.com" target="_blank">okkks.tistory.com</a></div>
<div><a href="http://okkks.tistory.com" target="_blank">okkks.tistory.com</a></div>
<div><a href="http://okkks.tistory.com" target="_blank">okkks.tistory.com</a></div>
<div><a href="http://okkks.tistory.com" target="_blank">okkks.tistory.com</a></div>
<div><a href="http://okkks.tistory.com" target="_blank">okkks.tistory.com</a></div>
</body>
</html>
더보기>
- jquery 불투명 배경 레이어 띄우기 / javascript layer popup / modal popup window / jquery 모달 팝업창 만들기 구현
