팝업창 띄우기

팝업창을 만들어 주는 window.open() 메소드를 보겠습니다. window.open() 메소드의 사용법은 다음과 같습니다.

window.open("팝업창으로 보여줄 문서","팝업창의 이름","옵션")

<SCRIPT LANGUAGE="JavaScript">
<!--
window.open("http://www.dreamwiz.com", "dreamwiz", "width=500,height=300,left=0,top=0,resizable=no");
//-->
</SCRIPT>

<input onclick="WinOpen('http://www.jasko.co.kr/lesson/js/sample44-1.html', 300, 300)" type="button" value="sample" name="formbutton1" />

이 예문은 http://www.dreamwiz.com 페이지를 가로 500픽셀, 높이 300 픽셀의 크기로 왼족위 모서리에 붙게 팝업창으로 열어줍니다. 두 번째 인자인 "dreamwiz" 는 뭐냐구요? 이 부분은 팝업창의 이름을 말하는 것으로 프레임 문서에서 타겟(target) 처럼 사용할 수 있습니다.. 즉, <a href="xxx.html" target="dreamwiz">열기</a> 처럼 사용하게 되면, 현재 드림위즈 홈페이지가 열려있는 팝업창에 xxx.html 문서가 열리게 되는 것이랍니다. 이 두 번째 인자에 아무것도 입력하지 않으려면 그냥 "" 만 표시 해 줍니다. (예) : window.open("http://www.dreamwiz.com","", "옵션들")

세 번째 인자에는 옵션들을 설정 합니다. 이곳에서 사용할 수 있는 옵션에는 아래와 같은 것들이 있습니다

menubar	yes/no, 1/0	메뉴바를 보여주거나 숨깁니다
toolbar	yes/no, 1/0	도구막대를 보여주거나 숨깁니다
directories	yes/no, 1/0	디렉토리바를 보여주거나 숨깁니다
scrollbars	yes/no, 1/0	스크롤바를 보여주거나 숨깁니다
status	yes/no, 1/0	상태표시줄을 보여주거나 숨깁니다
location	yes/no, 1/0	주소표시줄을 보여주거나 숨깁니다
width	픽셀	팝업 윈도우의 가로크기를 지정합니다
height	픽셀	팝업 윈도우의 높이를 지정합니다
left	픽셀	팝업 윈도우의 x축 위치를 지정합니다
top	픽셀	팝업 윈도우의 y축 위치를 지정합니다
resizable	yes/no 1/0	팝업윈도우의 크기를 사용자가 임의로 수정할 수 있는지 여부를 지정합니다
fullscreen		전체화면 모드로 열어줍니다
channelmode		채널모드 창으로 열어줍니다

옵션인자를 지정하지 않으면 현재 창의 모양과 같은 형태로 팝업윈도우가 열리게 되고, 어느 한가지 옵션만 지정하면 나머지는 모두 디폴트 값으로 no 가 설정 됩니다.

버튼을 클릭하면 아무런 옵션이 없는 팝업 윈도우가 열리게 하는 코드는 아래와 같습니다

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=euc-kr">
<TITLE> Jasko Sample Script </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function winOpen() {
window.open("http://www.dreamwiz.com","dreamwiz");
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<input type=button onclick="winOpen();" value="옵션없이 팝업윈도우 열기">
</BODY>
</HTML>

<input onclick="WinOpen('http://www.jasko.co.kr/lesson/js/sample44-2.html', 300, 300)" type="button" value="sample" name="formbutton1" />

위에서 보듯이 옵션을 사용하지 않으면 <a href="xxx.html" target="_blank">열기</a> 처럼 태그를 사용한 것과 같은 효과를 줍니다. 이 옵션 인자는 지정하지 않아도 되지만, 두 번재 인자인 name 은 사용하지 않더라도 반드시 "" 으로 표시해 주어야 한다는 것은 명심하기 바랍니다.

그럼, 이번에는 몇가지 옵션만 선별적으로 주는 예를 보겠습니다

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=euc-kr">
<TITLE> Jasko Sample Script </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function winOpen() {
window.open("http://www.dreamwiz.com","dreamwiz","location=yes,width=400,height=300");
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<input type=button onclick="winOpen();" value="location=yes,width=400,height=300">
</BODY>
</HTML>

<input onclick="WinOpen('http://www.jasko.co.kr/lesson/js/sample44-2.html', 300, 300)" type="button" value="sample" name="formbutton1" />

위의 예에서 보듯이 특정 옵션을 지정하면 나머지 옵션값은 자동으로 no를 준 것과 같은 효과를 나타냅니다. 옵션을 줄때 주의할점은 절대 공백을 주어서는 안됩니다. 공백을 주게되면 네츠케이프 등에서는 에러를 발생시킬 수 있습니다

이번에는 잘 이용하면 아주 요긴하게 사용될 수 있는 fullscreen 모드와 channelmode 옵션으로 팝업윈도우를 열어보도록 하겠습니다

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=euc-kr">
<TITLE> Jasko Sample Script </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function fullOpen() { // fullscreen 모드로 열기 함수
window.open("http://www.dreamwiz.com","dreamwiz","fullscreen");
}
function channelOpen() { // 채널모드로 열기 함수
window.open("http://www.dreamwiz.com","dreamwiz","channelmode");
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<input type=button onclick="fullOpen();" value="fullscreen">
<p>fullscreen 윈도우를 닫으려면 Alt+F4 키를 누르세요
<p>
<input type=button onclick="channelOpen();" value="channelmode">
</BODY>
</HTML>

<input onclick="WinOpen('http://www.jasko.co.kr/lesson/js/sample44-3.html', 300, 300)" type="button" value="sample" name="formbutton1" />

window.open을 이용해서 창을 열때 여러 옵션들을 줄 수 있습니다.

window.open(주소, 창, 옵션); <== 이런식으로 사용 하며 됩니다.

fullscreen    = yes를 주면 창이 전체 창으로 뜹니다. (기본값은 no)
location   = yes를 주면 주소창이 활성화 됩니다. (기본값은 yes)
menubar       = yes를 주면 툴바가 나옵니다. (기본값은 yes)
resizable   = yes를 주면 창 사이즈 변경이 가능 합니다. (기본값은 yes)
scrollbars   = yes를 주면 창 스크롤바가 생깁니다. (기본값은 yes)
titlebar   = yes를 주면 타이틀바가 나옵니다. (기본값은 yes)
toolbar       = yes를 주면 툴바가 나옵니다. (기본값은 yes)
width       = 열리는 창의 가로 크기
height       = 열리는 창의 세로 크기

아래는 몇가지 옵션을 사용한 샘플 코드 입니다.

<script type="text/javascript">

function openDaum(){
    window.open("http://www.daum.net", "_blank", "width=400, height=400, toolbar=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no" );
}

</script>

<input type=button value="다음" on-click="openDaum()">

1. 팝업창 띄우는 방법

<script type="text/javascript">

<!--

function popupOpen(){

var popUrl = "test.html"; //팝업창에 출력될 페이지 URL

var popOption = "width=370, height=360, resizable=no, scrollbars=no, status=no;"; //팝업창 옵션(optoin)

window.open(popUrl,"",popOption);

}

//-->

</script>

<a href="javascript:popupOpen();" > 열려라 팝업창! </a>

2. 팝업창 띄울때 옵션(option) 종류

yes나 no로 지정하면 됩니다.

toolbar = 상단 도구창 출력 여부

menubar = 상단 메뉴 출력 여부

location = 메뉴아이콘 출력 여부

directories = 제목 표시줄 출력 여부

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

scrollbars = 스크롤바 사용 여부

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

사이즈 정의(픽셀 px)

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

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

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

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

실행화면

onClick을 통한 팝업창을 호출할때 정해진 위치와 정해진 사이즈, 그리고 스크롤바 사용여부에 대한 정의는 다음과 같다.
window.open('파일명 또는 경로명','새창이름','스크롤사용여부, 상하좌우 위치여부등');

위와같이 정의를 하면 페이지에서 화면을 호출할때 자신이 원하는 위치에 원하는 크기만큼 팝업화면을 호출할 수 있다.

function goPOPUP(seq, name) {
window.open('','target_name','scrollbars=yes,toolbar=yes,resizable=yes,width=100,height=100,left=0,top=0');
form.action = "www.ohmynews.com"; // 팝업화면을 호출할 페이지 또는 파일명
form.seq.value = seq;    // form에서 넘겨주는 seq값
form.name.value = name;    // form에서 넘겨주는 name값
form.target = "target_name"; // window.open 에서 선언한 target name
form.submit();
}

// scrollbars = yes :: 스크롤바 사용 (미사용 no)
// resizeable = yes :: 좌우스크롤바 사용 (미사용 no)
// menubar = yes    :: 메뉴바 사용 (미사용 no)
// toolbar = yes :: 툴바사용 (미사용 no)
// width = 100    :: 팝업창의 가로사이즈
// height = 100 :: 팝업창의 세로사이즈
// left = 10 :: 좌측에서 10픽셀을 띄운다.
// top = 10 :: 상단에서 10픽셀을 띄운다.

위에 정의되지 않은 기능 이외에도 status=yes, fullscreen 등의 추가적인 용어가 있으며 scrollbars, resizeable 등은 지정을 하지 않을 경우 열려야 하는 창이 팝업사이즈보다 더 클경우 상하 및 좌우스크롤은 자동으로 생성된다.

<strong style="FONT-SIZE: 13px; FONT-FAMILY: WF; FONT-VARIANT: normal; WHITE-SPACE: normal; TEXT-TRANSFORM: none; WORD-SPACING: 0px; COLOR: rgb(93,93,93); PADDING-BOTTOM: 0px; FONT-STYLE: normal; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; LETTER-SPACING: normal; LINE-HEIGHT: 22px; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">레이어팝업을 띄우고 닫기! 간단한 스크립트로 해결할수 있습니다.
</strong>

아주 예전 자료이지만 다시 올려봅니다.
굉장히 많은 분들이 궁금해 하시고 쪽지 남겨 주셨던 내용이라 혹시나 도움이 될지도 모르니 ^_^;;

여러 방법이 있지만 가장 쉬운 방법으로 설명해 드리겠습니다.

1.레이어를 만듭니다.

<Div id="Pop" style="position:absolute; left:100px; top:100px; width:100px; height:100px; z-index:1;"></Div>
Pop라는 이름의 레이어를 이렇게 생성합니다.
윈도우창 왼쪽에서 100px 위에서 100px 떨어진 곳에 시작하는 레이어죠.

2.레이어속에 원하는 내용물을 넣어줍니다.

<Div id="Pop" style="position:absolute; left:100px; top:100px; width:100px; height:100px; z-index:1;">
<img src="이미지주소">
</Div>

3.레이어의 초기상태를 보이지 않게 숨겨둡니다.

<Div id="Pop" style="position:absolute; left:100px; top:100px; width:100px; height:100px; z-index:1;display:none;">
<img src="이미지주소">
</Div>

4.이제 클릭할 경우 미리 만들어진 저 Pop 라는 레이어를 보여주면 됩니다.

간단한 스크립트를 작성하겠습니다.

5.작성한 펑션을 불러오면 원하시는 작업이 끝이 납니다.

<a href="javascript:ViewLayer();">열어주세요</a>

============================================================

간단하게 작성한것들이 사용함에 불편함이 있을거예요.
예를들어 열었는 레이어를 닫아준다던가 하는 그런것들요.
자 그럼 스크립트를 조금 수정해서 사용하기 편하게 만들어 보겠습니다.

이렇게 작성하시면 한번 클릭하면 열리고 한번 더 클릭하면 닫히게 됩니다.

사실 이 방법은 아주 예전에 사용하던 방법이지만
지금까지도 간략하게 사용할 수 있을법한 코드라 생각이 되네요,

혹시나 궁금하셨던 분들은 이 javascript 로 레이어 팝업창 해결하시길 바랍니다~

히죽 -