<script>
//screen.width : 현재 운영체제의 너비
//screen.height : 현재 운영체제의 높이
w = 640; //팝업창의 너비
h = 510; //팝업창의 높이
//중앙위치 구해오기
LeftPosition=(screen.width-w)/2;
TopPosition=(screen.height-h)/2;
//팝업 호출
function popup_open() {
window.open(
팝업url,
"팝업창이름",
"width="+w+",height="+h+",top="+TopPosition+",left="+LeftPosition+", scrollbars=no");
}
</script>
- 부록
window.open()의 모든 옵션들에 대한 이해
- name = window.open( "창에 보여줄 파일/홈페이지의 이름/주소", "창의 이름", "옵션" )
window.open() 메소드에 전달할 수 있는 파라미터 중 첫 번째는
보여줄 내용이고, 두 번째는 target으로서의 창 이름이며 세 번째가 창의 위치와 크기 및 모양을 지정할 수 있는 옵션
그룹이다. 그리고 window.open() 메소드가 되돌리는 값을 name에 담았다면 그 name은 그 창(자식 창)을 연
opener(부모 창)에서 자식 창을 컨트롤할 수 있는 이름이 된다.
다음과 같이 창을 열어보자.
|
<input type=button value="창" onClick= "window.open( 'small.htm','new','left=300, top=300, width=400, height=300, toolbar=no, location=yes, directories=no, status=no, menubar=no, scrollbars=yes, copyhistory=yes, resizable=no')"> |
<INPUT> |
참고로 가끔 보면 옵션들 사이에 빈칸이 있으면 안 된다고 말하는데, 이것은
넷스케이프에 관한 설명인 듯하다. 익스플로러에서도 줄바꿈(리턴)이 있으면 안 된다. 하드 리턴(문단 바꿈, <p>)은
물론이고 소프르 리턴(줄만 바꿈, <br>)도 끼어들면 결코 안 될 것이다.
창 열기 옵션은 상당히 많은데, 알아 두면 좋지만 다 외우기는 쉽지 않다. 모든 옵션을 한 번 보되, 나름대로 그룹화하여 소개한다. 이 내용은 1차적으로 http://pl.changwon.ac.kr/~chowing/js/win_open.html을 참고한 것이다. 넷스케이프 전용인지 익스플로러 전용인지 등을 확인하는 데 도움이 될 참고 사이트는 http://www.kbtech777.co.kr/lecture/webprog/jscript/javalibrary.htm(Javascript 속성 라이브러리) 등.
|
위치 |
screenX / left(ie전용) : 왼쪽 좌표, screenY / top(ie전용) : 위쪽 좌표 |
|
크기 |
width : 너비, height : 높이 |
|
resizable(크기변경 허용 여부) |
|
innerWidth, innerHeight, outerWd\idth, outerHeight(넷스케이프 전용?) |
|
다른 창과의 관계 |
dependent(opener가 닫히면 함께 닫힘) |
|
alwaysLowered(항상 깔림), alwaysRaised(항상 드러남) |
|
z-lock(yes로 설정하면, 활성화되어도/포커스가 주어져도 다른 창 위로 떠오르지는 못하게 막는다) |
|
기타 옵션들 |
hotkeys( no로 지정하면 menubar 없이는 (security 및 quit) 핫키를 제외한 어떤 핫키도 사용할 수 없게 된다 ) |
|
directories(디렉터리 버튼들) |
|
location(로케이션 엔트리) |
|
menubar(File, Edit, View, 기타의 메뉴바) |
|
scrollbars(필요할 때 나타날 스크롤바) |
|
status(아래쪽 상태바) |
|
titlebar(위쪽 타이틀바) |
|
toolbar(Back, Forward, 기타의 툴바) |
|
IE4(이상)에서만 사용 가능한 옵션들 |
channelmode(채널바가 있는 창) |
|
fullscreen(전체 화면 차지) |
|
left(screenX), top(screenY) |
위와 같은 방식으로 정리하면 저절로 외워지게 하는 데 도움이 되지 않을까
생각한다. 정리한 직후에 남는 궁금증은 z-lock과 alwaysLowered는 동일한 옵션인가? 하는 점이다. 실습이 최상의
선택이라고 믿으므로 차근히 테스트해 보자.
먼저, 아무 옵션도 주지 말고 창을 열어 보자.
|
<input type=button value="창" onClick= "window.open( 'small.htm','new','')"> |
|
타이틀바, 메뉴바, 툴바, 로케이션 엔트리, 스크롤바, 상태바 등 아무튼 얼른 보아서 모든 옵션들이 다 yes로 설정되어 나타나는 것 같다. 이번에는 크기와 위치만을 지정하여 창을 열어 보자.
|
<input type=button value="창" onClick= "window.open( 'small.htm','new','left=300, top=300, width=400, height=300')"> |
|
이번에는 타이틀바만 나타나고, 다른 모든 것이 no로 설정된 모양이다(최대화
버튼이 죽어 있다). resizable로 no인 것이 분명하다. 옵션 중에 하나라도 설정하면 타이틀바와 hotkeys만 yes로
되고 나머지는 모든 no로 디폴트 설정되는 것이라고 이해하면 될 것 같다.
다음으로, resizable, resizable=yes 또는 resizable=1을 크기, 위치 지정과 함께 주어 보자.
|
<input type=button value="창" onClick=
"window.open( 'small.htm','new','left=300, top=300, width=400,
height=300, resizable=1')"> |
|
최대화 버튼이 살아나고, 가장자리에 마우스를 대면 리사이즈 화살표 모양으로 변한다. 이번에는 디렉터리 버튼들을 나타내어 보자.
|
<input type=button value="창" onClick=
"window.open( 'small.htm','new','left=300, top=300, width=400,
height=300, resizable, directories')"> |
|
타이틀바 아래에 '연결, 링크 사용자 정의, 인터넷 시작' 등 줄이 나타나고 그 줄 오른쪽의 >> 표시를 클릭하면 채널 가이든 등 리스트가 드롭다운된다. 이번에는 로케이션 엔트리를 나타내어 보자.
|
<input type=button value="창" onClick=
"window.open( 'small.htm','new','left=300, top=300, width=400,
height=300, resizable, directories, location')"> |
|
이번에는 디렉터리 버튼들이 오른쪽으로 밀려 나가고, 같은 줄 왼쪽에 '주소'라는 표시와 로케이션 드롭다운이 심어져 있다.
|
<input type=button value="창" onClick=
"window.open( 'small.htm','new','left=300, top=300, width=400,
height=300, resizable, directories, location, menubar')"> |
|
타이틀바와 로케이션/디렉터리 중간에 메뉴바 줄이 삽입된다.
|
<input type=button value="창" onClick=
"window.open( 'small.htm','new','left=300, top=300, width=400,
height=300, resizable, directories, location, menubar, scrollbars')"> |
|
스크롤바를 지정하면, 스크롤할 필요가 없는 경우에도 오른쪽의 스크롤바는 여전히 나타난다.
|
<input type=button value="창" onClick=
"window.open( 'small.htm','new','left=300, top=300, width=400,
height=300, resizable, directories, location, menubar, scrollbars,
toolbar')"> |
|
타이틀바, 메뉴바 아래에 뒤로/앞으로/중지/새로고침 등의 툴바가 삽입된다.
|
<input type=button value="창" onClick=
"window.open( 'small.htm','new','left=300, top=300, width=400,
height=300, resizable, directories, location, menubar, scrollbars,
toolbar, status')"> |
|
아래쪽 상태바까지 모든 것이 다 나타난다.