[JavaScript] window.open() - 팝업 만들기

window.open() 메서드는 대부분 새창으로 팝업을 만들때 사용합니다. 

window.open() 의 내용은 아래와 같습니다.

window.open('팝업 주소', '팝업창 이름', '팝업창 설정');
 
ex)
window.open('popup.html', 'pop01', 'top=10, left=10, width=500, height=600, status=no, menubar=no, toolbar=no, resizable=no');

팝업 설정

팝업창 설정은 아래와 같이 존재합니다.

- 값은 yes 또는 no 로 지정.

toolbar = 상단 도구창 출력 여부 

menubar = 상단 메뉴 출력 여부

location = 메뉴아이콘 출력 여부

directories = 제목 표시줄 출력 여부

status = 하단의 상태바 출력 여부

scrollbars = 스크롤바 사용 여부

resizable = 팝업창의 사이즈 변경 가능 여부

fullscreen = 전체화면으로 할지 선택 여부

channelmode = F11키 기능이랑 같음

- 사이즈 정의

width = 팝업창의 가로 길이 설정

height = 팝업창의 세로 길이 설정

top = 팝업창이 뜨는 위치(화면 위에서부터의 거리 지정)

left = 팝업창이 뜨는 위치(화면 왼쪽에서부터의 거리 지정)

사용 방법

window.open은 두가지 방법으로 사용할 수 있습니다.

1. 직접 태그에 onclick 속성으로 사용.

2. function함수를 사용하여 호출 사용.

- onclick 사용

 
<a href="javascript:void(0);" onclick="window.open('popup.html', 'pop01', 'top=10, left=10, width=500, height=600, status=no, menubar=no, toolbar=no, resizable=no');">버튼</a>
 

- function 사용

 
<script type="text/javascript">
    function winPopup() {
        var popUrl = "popup.html";
        var popOption = "top=10, left=10, width=500, height=600, status=no, menubar=no, toolbar=no, resizable=no";
        window.open(popUrl, popOption);
    }
</script>
 
<a href="javascript:void(0);" onclick="winPopup();">버튼</a>