- window.open() 함수 사용하여 팝업창 띄우기 -
알아두기만하면 언젠가는 꼭 쓰이게 마련인 script로 윈도우 팝업창 띄우는 방법에 대해 기록해두자.
사용법은 제목에 쓰여있는것 처럼 window.open() 을 사용하면 손쉽게 띄울수 있다.
var windowPop = window.open(url, windowName, [windowFeatures]);
1. windowPop (반환값)
- 새로 만든 window popup 창의 객체이며 반환값이 없으면(윈도우를 열 수 없으면) null 리턴한다.
- 새 창의 특성 및 메소드에 액세스하는데 사용될 수 있다.
- windowPop.close(), windowPop.focus() 등으로도 사용할 수 있다.
2. url (주소)
- 새 창이 보여질 주소이며 값이 비어있을 경우 빈창이 보인다.
- '/popup/popOne.html', '/cmmn/personPopup.do' 등과 같이 사용할 수 있다.
3. windowName (팝업이름)
- 새로 열릴 팝업창의 이름을 지정한다.
- 동일한 이름의 팝업창이 열려 있을 경우 해당 팝업창의 내용이 초기상태로 바뀐다.
- 이름이 다를경우 팝업창이 새로 열린다.
4. windowFeatures (팝업 속성, 옵션)
- 선택적인 값으로 창의 크기, 스크롤, 리사이즈 가능 등의 속성을 지정한다.
- 주로 사용되는 옵션 (일부 기능은 특정 브라우저에서만 작동한다.)
|
옵션 명 |
값 속성 |
설명 |
|
width |
number |
창의 너비 값(px) |
|
height |
number |
창의 높이 값(px) |
|
left |
number |
창의 화면 왼쪽에서의 위치(px) |
|
top |
number |
창의 화면 위쪽에서의 위치(px) |
|
scrollbars |
boolean(yes/no , 1/0) |
스크롤바 사용 여부 |
|
resizable |
boolean(yes/no , 1/0) |
창 조절 여부 |
|
location |
boolean(yes/no , 1/0) |
주소창 표시 여부 |
|
... |
||
- 참고 ( https://developer.mozilla.org/ko/docs/Web/API/Window/open )
5. 예시
- 예시 1) window.open() 안에 전부 작성하기
window.open('windowOpen.html', 'windowPop', 'width=400, height=600, left=400, top=400, resizable = yes')
- 예시 2) 함수로 빼내어 공통으로 사용하기
function openPopUp(url, name){
var options = 'width=500, height=600, top=30, left=30, resizable=no, scrollbars=no, location=no';
window.open(url, name, options);
}
댓글