javascript」window.open() - 팝업창 속성

window.open()

팝업창을 띄우는 스크립트함수인데, 요즘은 반응형이 대세인가 레이어로 대체가 되어 자주 사용하지 않습니다. 하지만 팝업창을 사용해야 할 조건이 종종 있습니다.

팝업창 열기 : window.open('url','팝업창이름','속성')

스크립트함수를 따로 만들어서 사용하나, 대부분 태그에 직접 입력을 하며, 태그에  onclick 을 이용하여 사용합니다.

//=> 속성입력 없이 사용하면 _blank로 새창이 열리는 것과 동일 합니다.
<a href="#" onclick="javascrit:window.open('http://nate.news','popup_1','')">팝업을 엽니다</a>

//=> 속성은 여러가지가 있으나, 필요한 것만 입력하시면 되며, 지정하지 않은 속성값은 기본 값으로 출력됩니다.
<a href="#" onclick="javascrit:window.open('http://nate.news','popup_1','width=500px,height=400px,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,left=300px,top=100px')">팝업을 엽니다</a>

//=> 스크롤바가 생겨서 보기 힘드니 보기 좋게 타이핑 하겠습니다. 위에 것과 같은 거에요
<a href="#" onclick="javascrit:window.open(
  'http://nate.news',
  'popup_1',
  '
   width=500px,
   height=400px,
   toolbar=no,
   location=no,
   status=no,
   menubar=no,
   scrollbars=no,
   resizable=no,
   left=300px,
   top=100px
  '
)">팝업을 엽니다</a>

속성 값은 '따옴표 안에서 ,(쉼표)로 구분합니다.

아래 이미지는 window.open() 함수에서 사용할 수 있는 속성들입니다.

scrollbars : 팝업창의 스크롤바

toolbar : 알툴바 같은 브라우저 툴바

location : 주소입력창

resizable : 팝업창의 사이즈의 변경

status : 팝업창 하단에 상태표시줄

menubar : 브라우저 메뉴(보통 안보이게 되어 있음)

자주 쓰이는 속성값은 widht, height를 포함하여 위의 6가지 입니다.