jQuery 레이어 창 만들기

jQuery를 이용해
레이어로 창을 만듭니다.

스크롤이 될때마다 브라우저 창 사이즈가 변할때 마다 그 위치를 자동으로
잡아 줍니다.

css 만 원하는 방식으로 바꾸시면 됩니다.

소스는 다음과 같습니다.

< style >
#mask {position:absolute;left:0;top:0;z-index:900;background-color:#000;display:none;}
#dialog {position:absolute;left:0;top:0;display:none;z-index:901;}
< /style >



// html
< div id="dialog">
	디자인된 내용은 이쪽에 정적 또는 동적으로 넣으심 됩니다.
< /div>
< div id="mask" onclick="close_layer_window(); return false;">< /div>



< script >
var is_mask_run =false;

// 창 리사이즈할때 마다 갱신
$(window).resize(function () {
	if(is_mask_run){
		modal_window();
	}
});

// 스크롤할때마다 위치 갱신
$(window).scroll(function () {
	if(is_mask_run){
		modal_window();
	}
});

//마스크 배경 클릭시 창 닫기
$('#mask').click(function ()
{
	$(this).hide();
	$('#dialog').hide();

	is_mask_run =false;
});

/*레이어 윈도우창 닫기*/
function close_layer_window(){
	$('#mask').hide();
	$('#dialog').hide();
	is_mask_run= false;
}

// 창 사이즈 설정
function modal_window()
{
	// 활성화
	is_mask_run = true;
	
	// 마스크 사이즈
	var maskHeight = $(document).height();
	var maskWidth = $(window).width();
	$('#mask').css({'width':maskWidth,'height':maskHeight});

	// 마스크 effect  
	$('#mask').fadeTo("slow",0.8); 

	// 윈도우 화면 사이즈 구하기
	var winH = $(window).height();
	var winW = $(window).width();

	// 스크롤 높이 구하기
	var _y =(window.pageYOffset) ? window.pageYOffset
	: (document.documentElement && document.documentElement.scrollTop) ? document.documentElement.scrollTop
	: (document.body) ? document.body.scrollTop
	: 0;

	if(_y<1){
	var h = winH/2;
	}else{
	var h = winH/2+_y;
	}

	// dialog창 리사이즈
	var dial_width =$('#dialog').width();
	var dial_height = $('#dialog').height();
	$('#dialog').css({'width':dial_width,'height':dial_height});
	$('#dialog').css('top', h-dial_height/2);
	$('#dialog').css('left', winW/2-dial_width/2); 

	// dialog창  effect
	$('#dialog').fadeIn(2000);
}
< /script >