JavaScript popup - 4.Popup창 배치(가운데, 계단식)

1. window.open() 팝업 창 배치

 - 윈도우 팝업은 원하는 위치에 배치가 가능한데, 보통 수동으로 아래의 예시처럼 창의 크기와 화면의 끝부터 떨어진 위치만큼의 값을 입력하여 배치한다.

ex) window.open('www.naver.com/', 'naver', 'width=400, height=600, left=400, top=400');

 

 - 이때, function을 만들어 더 편리하게, 원하는 위치에 배치할 수 있다.

 

2. function 생성으로 가운데 배치

 - function을 생성하여 생성할 팝업창의 폭과 높이를 넣어주면 스크린의 가운데에 위치할 수 있는 수식을 셋팅.

    데스크톱에 띄운 브라우저 창의 위치 : window.screenLeft

    현재 브라우저의 창 크기(메뉴, 툴바, 스크롤바 등의 크기를 뺀 나머지) : document.body.clientWidth

 

 - 위의 두 javascript 내장객체를 참고하여, 계산방법을 만들었다.

    (window.screenLeft+(document.body.clientWidth/2)-(팝업창 폭/2))

 - 위 수식을 넣어 left와 top에 가운데 위치로 자동 셋팅해 주고, 그 외에 필요한 툴바, 사이즈 수정 가능 속성 등은 고정값을 넣어 셋팅해준다. 

 - 보통 팝업은 toolbar=no, status=no, menubar=no, resizable=yes, location=no scrollbars=yes 의 셋팅으로 사용한다.

 

// 팝업창 옵션
var getPopOptions = function (width, height) {
	var rtnVal;
	var nWidth = width;
	var nHeight = height;
	var curX = window.screenLeft;
	var curY = window.screenTop;
	var curWidth = document.body.clientWidth;
	var curHeight = document.body.clientHeight;
	
	if(curY < 0) curY = 0;
	  
	var nLeft = curX + (curWidth / 2) - (nWidth / 2);
	var nTop = curY + (curHeight / 2) - (nHeight / 2);
	
	var strOption = '';
	strOption += 'left=' + nLeft + ',';
	strOption += 'top=' + nTop + ',';
	strOption += 'width=' + nWidth + ',';
	strOption += 'height=' + nHeight + ',';
	strOption += 'toolbar=no, status=no, menubar=no, resizable=yes, location=no scrollbars=yes';
	
	rtnVal = strOption;
	return rtnVal;
};

 

3. function 생성으로 계단식 배치

 - 위와 같은 방법을 이용해서 여러 개의 팝업창(멀티 팝업)에서의 계단식 배치도 쉽게 만들 수 있다.

 - 이땐, 띄울 창에 번호를 매겨서 순서대로 뜰 수 있도록 해줘야 하고, 그 순서에 일정한 값(팝업창 사이 띄우고 싶은 만큼의 값)을 더해서 그만큼 다음 팝업창과 차이가 나게 되며 계단식 팝업 배치가 된다. 

 

// 팝업창 옵션
var getPopOptions2 = function (width, height, num) {
	
	var rtnVal;

	var nWidth = width;
	var nHeight = height;
	var nLeft = num * 30;
	var nTop = num * 30;

	var strOption = '';
	strOption += 'left=' + nLeft + ',';
	strOption += 'top=' + nTop + ',';
	strOption += 'width=' + nWidth + ',';
	strOption += 'height=' + nHeight + ',';
	strOption += 'toolbar=no, status=no, menubar=no, resizable=yes, location=no scrollbars=yes';
	
	rtnVal = strOption;
	return rtnVal;
};

 

4. 사용방법

 

//1.가운데 배치
// window.open() 전에 specs를 설정 - getPopOptions함수 호출하여 팝업창 크기 넣어줌
var specs = getPopOptions('1500', '750');
window.open('', 'popCenter', specs);
$('#frmPop').prop('method', 'post').prop('target', 'popCenter').prop('action', '/popCenter.co').submit();
 	
    
//2.계단식 배치
// specs를 설정 - getPopOptions2함수 호출하며 열릴 팝업창 count
var popNum = 0;
popNum++;
var specs = getPopOptions2('850', '550', popNum); 
window.open('', 'pop'+popNum, specs); 
//후에 동적생성으로 폼전송(이전 게시글 참조)

 

5. 계단식 팝업 이미지

계단식 팝업을 사용한 팝업 배치

도움이 되셨다면 로그인하지 않아도 되는 🤍공감 꾹 눌러주세요^^