전체배경 투명&비활성화 팝업레이어 생성시 스크롤 화면 잘림현상

1. 전체배경 투명&비활성화 팝업레이어 생성시 스크롤 화면 잘림현상

 

 

/***********************************************************
	함수명		: addDiv_item()
	처리내용	: Div 태그 추가 함수
***********************************************************/
function addTag_item($addItem,$cName,$addID,$addCss,$outh){
	
	var div = document.createElement($addItem);
	var outhtml = "";//return할 HTML스트링
	div.innerHTML = "";//출력부분의 내용을 초기화
	div.id = $cName;
	div.className = $cName;
	//outhtml +="
666
";
	outhtml = $outh;
	div.innerHTML = outhtml;
	document.getElementById($addID).appendChild(div);
	//elm.style.display = "block"; 
	document.getElementById($cName).style.display="block";
	document.getElementById($cName).accessKey = "L";	
	setCSSProperty($cName, $addCss);
}		

/***********************************************************
	함수명		: modalPopup()
	처리내용	: 모달팝업 함수
	   모달팝업에 변수값은 브라우저에서 레이아웃의 좌측위치 %값
	   lfNum = 40 ( left:40% )
***********************************************************/

function modalPopup(lfNum){
	var popName = "popLayer";
	//alert(naviApp()+"참나");
	
	if(naviApp().indexOf("MSIE") !=-1){
		//alert(navigator.appName);
		op = "filter:alpha(opacity=35);";
	}else{
		//alert(navigator.appName);
		op = "";
	}
	addTag_item("div",'popWindow',"mosBody",'display:none;position:absolute;left:0;top:0;width:100%;height:100%;z-index:1000;','' );
	
	addTag_item("div",'modalWindow',"popWindow",'position:absolute;border:0;left:0;top:0;width:100%;height:100%;background:#000;opacity:.35;'+op,'' );
	addTag_item("div",'popLayer',"popWindow",
				"position:absolute;top:150px;left:"+lfNum+"%;padding:10px;border:2px solid #737373;margin:0 0 0 -180px;background:#ffffff;" ,'');
	
	return popName;

}
/***********************************************************
	함수명		: popCall()
	처리내용	: 모달팝업에 들어갈 함수 정의
	popCall( style left값%, div가로사이즈, 내용호출함수, 컨텐츠배경색);
***********************************************************/

function popCall(lf,wSize,fun){
	addTag_item("div","modalCon",modalPopup(lf),
		"position:relative;width:"+wSize+"px;background:#f2f2f2;",fun);
	
}

 

 

 

여기까지가 기본적인 모달 팝업 스타일이다..

하지만 화면에 스크롤이 있을경우 스크롤을 움직이면 백그라운드가 짤리는 현상이 일어난다.

그부분의 해결법은 두가지가 있는데

1. 브라우져 전체 사이즈를 구하는 document.body.clientWidth / document.body.clientHeight 함수를 이용하여 백그라운드 사이즈를 px로 정해버리는 방법

2. 팝업 이벤트가 발생할경우 body에 스크롤 no로 해버리는 방법

위 소스는 2번으로 적용해놓은 상태..