[Javascript] 팝업창 열기 window.open()

 

개발하다보면 팝업띄우는 기능이 필요할때가 많은데요. 요즘은 페이지 내에서 modal을 이용해서도 많이 쓰지만 

꾸준히 많이 쓰이죠.

 

팝업 띄우는 함수: window.open() 사용법.

팝업을 띄우기 위해서는 

window.open()를 사용하면 됩니다.

window.open(url,name,option);

- url : URL

- name: 팝업창 이름

- option: 팝업창 옵션

 

기본적인 사용법은 다음과 같습니다.

ex) window.open("https://www.naver.com","네이버","width=500,height=500,top=100,left=100")

 

---

여기서 옵션을 사용하여 가로길이, 위치를 조정할수 있죠.

width :   팝업창의 가로길이
height :  팝업창의 세로길이

top : 팝업창 상하 위치

left : 팝업창 좌우 위치
toolbar :  툴바 (IE전용)
menubar :  메뉴창 (IE전용)
location :  주소창 (IE전용)
scrollbar :  스크롤바 (IE전용)
status : 상태바 표시 (IE전용)
resizable :  리사이징 허용 (IE전용)
fullscreen :  전체화면 (IE전용)

 

필요없는 옵션값들을 no로 적고, top, left, width, height값을 변경하려면 불편하므로 다음과 같이 함수로 만들어 보았습니다.

 

function popupOpen( url, popWinName, popupTop, popupLeft, popupWidth, popupHeight ){

	   var option = "fullscreen=no,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no";

	   var Top = popupTop;
	   var Left = popupLeft;
	   if (Top < 0) Top = 0;
	   if (Left < 0) Left = 0;
	   if(popupWidth<1) popupWidth = 1;
	   if(popupHeight<1) popupHeight = 1;
	   option = option + ",width=" + popupWidth + ",height=" + popupHeight+",left=" + Left + ",top=" + Top;
	   return window.open(url, popWinName, option);
}

//var popup = popupOpen('http://www.naver.com' ,"네이버",0,0,500,500);
//var popup = popupOpen('http://www.naver.com' ,"네이버");
//var popup = popupOpen('http://www.naver.com' );

     
  

 

도움이 되었다면 좋아요 및 구독 부탁드립니다.