jquery를 이용한 레이어 가운대 띄우기 (중앙정렬, 멀티레이어, 가운데 위치 자동조절)
Written by munilive on (Updated: )jquery를 이용하여 마스크를 현재 창 전체로 씌운 다음 가운데로 원하는 레이어를 띄워주는 함수입니다. 그 외 창 사이즈를 조절하면 자동으로 레이어의 위치도 가운데로 다시 정렬되며, 레이어를 띄운 상태에서 다른 레이어를 또 띄우게 되면 기존 레이어 위에 마스크와 새로운 레이어를 다시 띄우게 됩니다.
미리 보기에서 구현된 내용을 미리 확인해 보세요.
<script type="text/javascript">
//레이어 가운데 띄우고 마스크 띄우기
function toggleLayer( obj, s ) {
var zidx = $("#lay_mask").css("z-index");
if(s == "on") {
//화면중앙에 위치시키기
var left = ( $(window).scrollLeft() + ($(window).width() - obj.width()) / 2 );
var top = ( $(window).scrollTop() + ($(window).height() - obj.height()) / 2 );
// 높이가 0이하면 0으로 변경
if(top<0) top = 0;
if(left<0) left = 0;
var layer_idx = Number(zidx) + 10;
$("#lay_mask").css("z-index", layer_idx);
obj.css({"left":left, "top":top, "z-index":layer_idx}).addClass("PopupLayer");
$("body").append(obj);
wrapWindowByMask();//배경 깔기
obj.show();//레이어 띄우기
}
if(s == "off") {
if($(".PopupLayer").length > 1) {
var layer_idx = zidx - 10;
$("#lay_mask").css("z-index", layer_idx);
} else {
$("#lay_mask").hide();
}
obj.removeClass("PopupLayer").hide();
}
if(s == "off2") { //레이어에서 다른 레이어를 띄울 경우 마스크는 안닫기 위한 처리
obj.removeClass("PopupLayer").hide();
}
}
//마스크 띄우기
function wrapWindowByMask() {
var mask = $("#lay_mask");
//화면의 높이와 너비를 구한다.
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//마스크의 높이와 너비를 화면 것으로 만들어 전체 화면을 채운다.
mask.css({'width':maskWidth,'height':maskHeight});
mask.show();
}
// 사이즈 리사이징
function ResizingLayer() {
if($("#lay_mask").css("display") == "block") {
//화면의 높이와 너비를 구한다.
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//마스크의 높이와 너비를 화면 것으로 만들어 전체 화면을 채운다.
$("#lay_mask").css({'width':maskWidth,'height':maskHeight});
$(".PopupLayer").each(function () {
var left = ( $(window).scrollLeft() + ($(window).width() - $(this).width()) / 2 );
var top = ( $(window).scrollTop() + ($(window).height() - $(this).height()) / 2 );
if(top<0) top = 0;
if(left<0) left = 0;
$(this).css({"left":left, "top":top});
});
}
}
window.onresize = ResizingLayer;
</script>
<style type="text/css">
#lay_mask {
position:absolute;
background:black;
z-index:100;
opacity:0.5;
filter:alpha(opacity=50);
background:rgba(0,0,0,.5);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#4C000000, endColorstr=#4C000000)
}
.PopupLayer { position: absolute; z-index: 110; }
</style>
<div id="lay_mask" style="display: none;"><!-- 마스크로 띄워질 Div --></div>