jquery를 이용한 레이어 가운대 띄우기 (중앙정렬, 멀티레이어, 가운데 위치 자동조절)

jquery를 이용하여 마스크를 현재창 전체로 씌운다음 가운데로 원하는 레이어를 띄워주는 함수 입니다. 그외 창 사이즈를 조절하면 자동으로 레이어의 위치도 가운데로 다시 정렬되며, 레이어를 띄운 상태에서 다른 레이어를 또 띄우게 되면 기존 레이어 위에 마스크와 새로운레이어를 다시 띄우게 됩니다.

백번 말하는 것보다 한번 보는게 낫다고 아래 링크로 들어가서 레이어를 순차적으로 띄워보시고 창 사이즈를 조절 해보세요.!!

여기로

자바스크립트 소스

//레이어 가운데 띄우고 마스크 띄우기
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;

 

마스크 스타일 시트

#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; }

 

마스크 레이어를 위해 body 에 위치 할 HTML

<div id="lay_mask" style="display: none;"><!-- 마스크로 띄워질 Div --></div>

 

CC BY-NC-SA 4.0 This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.