웹디자인스킬 > 스크립트/소스/팁 > 팝업창 모음#c_270#c_270
1. 옵션을 HEAD안에…
<script-x language="JavaScript-x">
function openNewWindow(window) {
open (window,"NewWindow","left=0, top=0, toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, width=200, height=200");
}
</script-x>
<a href=javascript-x:openNewWindow("주소입력")>새창열기</a>
2. 링크에 옵션을 지정…
<a href="javascript-x:;" onclick="window.open(‘주소입력’,’name’,’resizable=no width=200 height=200′);return false">새창열기</a>
* 옵션 *
새창 뛰울때 용도에 맞게 옵션 설정을 해줍니다. "YES" 또는 "NO" 로 지정 해주면 됩니다.
menubar – 파일, 편집, 보기….부분
toolbar – 뒤로, 앞으로, 새로고침 아이콘등이 있는 부분
directories – 연결 디렉토리가 표시되는 부분
location – 주소 입력창
status – 아래 브라우저 상태 바
scrollbars – 스크롤
resizable – 리사이즈 옵션
1.자동 띄우기
팝업창에 삽입
<html>
<head>
<title></title>
<script-x language="javascript-x">
<!–
function pop(){
window.open("팝업창파일", "pop", "width=400,height=500,history=no,resizable=no,status=no,scrollbars=yes,menubar=no")
}
//–>
</script-x>
</head>
<body onload="javascript-x:pop()">
이벤트 팝업창을 띄우기
</body>
</html>
2.프레임이 있는 팝업창 닫기
팝업창에 삽입
<html>
<head>
<title></title>
<script-x language="Javascript-x">
<!–
function frameclose() {
parent.close()
window.close()
self.close()
}
//–>
</script-x>
</head>
<body>
<a href="javascript-x:frameclose()">프레임셋 한방에 닫기</a>
</body>
</html>
3.팝업창 닫고 프레임이 없는 부모창에서 원하는 페이지로 이동하기
팝업창에 삽입
<html>
<head>
<title></title>
<script-x language="javascript-x">
<!–
function MovePage() {
window.opener.top.location.href="연결할파일"
window.close()
}
//–>
</script-x>
</head>
<body>
<a href="javascript-x:MovePage();">자세한내용보기</a>
</body>
</html>
4.팝업창 닫고 프레임이 있는 부모창에서 원하는 페이지로 이동하기
팝업창에 삽입하고 팝업창의 설정은 프레임셋 페이지에 해야함
오픈창이 아닐경우에는 window.top.프레임이름.location.href="연결할파일" 적용한다
<html>
<head>
<title></title>
<script-x language="javascript-x">
<!–
function MovePage() {
window.opener.top.프레임이름.location.href="연결할파일"
//팝업창이 아닌것우..
window.close()
}
//–>
</script-x>
</head>
<body>
<a href="javascript-x:MovePage();">자세한내용보기</a>
</body>
</html>
5.팝업창 자동으로 닫기
팝업창에 삽입
<html>
<head>
<title>Close Window Timer</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script-x language="JavaScript-x">
<!–
function closeWin(thetime) {
setTimeout("window.close()", thetime); //1000 은 1초를 의미합니다.
}
//–>
</script-x>
</head>
<body onLoad="closeWin(‘5000’)">
이창은 5초후 자동으로 창이 닫힘니다.<br>
</body>
</html>
6.프레임 나눈 팝업창 한번에 닫기
팝업창에 삽입
<html>
<head>
<title>Close Window Timer</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script-x language="JavaScript-x">
<!–
function closeWin(thetime) {
setTimeout("window.close()", thetime); //1000 은 1초를 의미합니다.
}
//–>
</script-x>
</head>
<body onLoad="closeWin(‘5000’)">
이창은 5초후 자동으로 창이 닫힘니다.<br>
</body>
</html>
7.하루동안 팝업창 띄우지 않기 소스 예제1
부모창인 index.htm에 삽입
<html>
<head>
<title>..</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script-x language="javascript-x">
<!–
function getCookie(name)
{
var Found = false
var start, end
var i = 0
// cookie 문자열 전체를 검색
while(i <= document.cookie.length)
{
start = i
end = start + name.length
// name과 동일한 문자가 있다면
if(document.cookie.substring(start, end) == name)
{
Found = true
break
}
i++
}
// name 문자열을 cookie에서 찾았다면
if(Found == true) {
start = end + 1
end = document.cookie.indexOf(";", start)
// 마지막 부분이라 는 것을 의미(마지막에는 ";"가 없다)
if(end < start)
end = document.cookie.length
// name에 해당하는 value값을 추출하여 리턴한다.
return document.cookie.substring(start, end)
}
// 찾지 못했다면
return ""
}
function openMsgBox()
{
var eventCookie=getCookie("memo");
if (eventCookie != "no")
window.open(‘팝업창파일’,’_blank’,’width=300,height=300,top=50,left=150′);
//팝업창의 주소, 같은 도메인에 있어야 한다.
}
openMsgBox();
//–>
</script-x>
</head>
<body>
</body>
</html>
팝업창인 pop.htm에 삽입
<html>
<head>
<title></title>
<head>
<script-x language="JavaScript-x">
<!–
function setCookie( name, value, expiredays )
{
var todayDate = new Date();
todayDate.setDate( todayDate.getDate() + expiredays );
document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
}
function closeWin()
{
if ( document.myform.event.checked )
setCookie("memo", "no" , 1); // 1일 간 쿠키적용
}
//–>
</script-x>
</head>
<body onunload="closeWin()">
<form name="myform">
<input type="checkbox" name="event">다음부터 이 창을 열지않음
<input type=button value="닫기" onclick="self.close()">
</form>
</body>
</html>
8.하루동안 팝업창 띄우지 않기 소스 예제2
부모창인 index.htm에 삽입
<html>
<head>
<title>..</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<head>
<SCRIPT-x LANGUAGE="JavaScript-x">
<!–
function change(form)
{
if (form.url.selectedIndex !=0)
parent.location = form.url.options[form.url.selectedIndex].value
}
function setCookie( name, value, expiredays )
{
var todayDate = new Date();
todayDate.setDate( todayDate.getDate() + expiredays );
document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
}
function getCookie( name )
{
var nameOfCookie = name + "=";
var x = 0;
while ( x <= document.cookie.length )
{
var y = (x+nameOfCookie.length);
if ( document.cookie.substring( x, y ) == nameOfCookie ) {
if ( (endOfCookie=document.cookie.indexOf( ";", y )) == -1 )
endOfCookie = document.cookie.length;
return unescape( document.cookie.substring( y, endOfCookie ) );
}
x = document.cookie.indexOf( " ", x ) + 1;
if ( x == 0 )
break;
}
return "";
}
if ( getCookie( "Notice" ) != "done" )
{
noticeWindow = window.open(‘pop.htm’,’notice’,’toolbar=no,location=no,directories=no,status=no,
menubar=no,scrollbars=no, resizable=no,width=400,height=400′);
//winddow.open의 ()의 것은 한줄에 계속 붙여써야 오류가 안남, 줄바뀌면 오류남
noticeWindow.opener = self;
}
//–>
</script-x>
</head>
<body>
</body>
</html>
팝업창인 pop.htm에 삽입
<html>
<head>
<title></title>
<head>
<SCRIPT-x language="JavaScript-x">
<!–
function setCookie( name, value, expiredays )
{
var todayDate = new Date();
todayDate.setDate( todayDate.getDate() + expiredays );
document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
}
function closeWin()
{
if ( document.forms[0].Notice.checked )
setCookie( "Notice", "done" , 1);
self.close();
}
//–>
</script-x>
</head>
<body onunload="closeWin()">
<form>
<input type=CHECKBOX name="Notice" value="">다시 팝업 안뜸
<a href="javascript-x:window.close()">닫기</a>
</form>
</body>
</html>
9.같은 브라우져에서 팝업 띄우기 않기
부모창인 index.htm에 삽입
<html>
<head>
<title>..</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script-x language="javascript-x">
<!–
function getCookie(name)
{
var Found = false
var start, end
var i = 0
// cookie 문자열 전체를 검색
while(i <= document.cookie.length)
{
start = i
end = start + name.length
// name과 동일한 문자가 있다면
if(document.cookie.substring(start, end) == name)
{
Found = true
break
}
i++
}
// name 문자열을 cookie에서 찾았다면
if(Found == true) {
start = end + 1
end = document.cookie.indexOf(";", start)
// 마지막 부분이라 는 것을 의미(마지막에는 ";"가 없다)
if(end < start)
end = document.cookie.length
// name에 해당하는 value값을 추출하여 리턴한다.
return document.cookie.substring(start, end)
}
// 찾지 못했다면
return ""
}
function openMsgBox()
{
var eventCookie=getCookie("memo");
if (eventCookie != "no")
window.open(‘팝업창파일’,’_blank’,’width=300,height=300,top=50,left=150′);
//팝업창의 주소, 같은 도메인에 있어야 한다.
}
openMsgBox();
//–>
</script-x>
</head>
<body>
</body>
</html>
팝업창인 pop.htm에 삽입
<html>
<head>
<title></title>
<head>
<script-x language="JavaScript-x">
<!–
function setCookie( name, value, expiredays )
{
//같은 창에서만 안띄움.
//expiredays 값은 상관없음.
document.cookie = name + "=" + escape( value ) + "; path=/;";
function closeWin()
{
if ( document.myform.event.checked )
setCookie("memo", "no" , 1); // 1일 간 쿠키적용
}
//–>
</script-x>
</head>
<body onunload="closeWin()">
<form name="myform">
<input type="checkbox" name="event">다음부터 이 창을 열지않음
<input type=button value="닫기" onclick="self.close()">
</form>
</body>
</html>
10.팝업창 가운데에 자동띄우기
팝업창에 삽입
<html>
<head>
<title>..</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script-x language="JavaScript-x">
<!–
function winCentre() {
if (document.layers) {
var sinist = screen.width / 2 – outerWidth / 2;
var toppo = screen.height / 2 – outerHeight / 2;
} else {
var sinist = screen.width / 2 – document.body.offsetWidth / 2;
var toppo = -75 + screen.height / 2 – document.body.offsetHeight / 2;
}
self.moveTo(sinist, toppo);
}
//–>
</script-x>
</head>
<body onLoad="winCentre()">
</body>
</html>
11.부모창에서 클릭하면 팝업창 가운데에 띄우기
부모창에 삽입
<html>
<head>
<title></title>
<head>
<script-x language="JavaScript-x">
<!–
var win = null;
function NewWindow(mypage,myname,w,h,scroll){
LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
settings =
‘height=’+h+’,width=’+w+’,top=’+TopPosition+’,left=’+LeftPosition+’,scrollbars=’+scroll+’,
resizable’
win = window.open(mypage,myname,settings)
}
//–>
</script-x>
<body>
<a href="팝업창파일" onclick="NewWindow(this,’name’,’100′,’100′,’yes’);return false">
링크</a>
</body>
</html>
12.같은 브라우져에서만 팝업 띄우기 않기
부모창인 index.htm에 삽입 _새로 브라우져를 열면 팝업창이 뜸
<html>
<head>
<title>..</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script-x language="javascript-x">
<!–
function getCookie(name)
{
var Found = false
var start, end
var i = 0
// cookie 문자열 전체를 검색
while(i <= document.cookie.length)
{
start = i
end = start + name.length
// name과 동일한 문자가 있다면
if(document.cookie.substring(start, end) == name)
{
Found = true
break
}
i++
}
// name 문자열을 cookie에서 찾았다면
if(Found == true) {
start = end + 1
end = document.cookie.indexOf(";", start)
// 마지막 부분이라 는 것을 의미(마지막에는 ";"가 없다)
if(end < start)
end = document.cookie.length
// name에 해당하는 value값을 추출하여 리턴한다.
return document.cookie.substring(start, end)
}
// 찾지 못했다면
return ""
}
function openMsgBox()
{
var eventCookie=getCookie("memo");
if (eventCookie != "no")
window.open(‘팝업창파일’,’_blank’,’width=300,height=300,top=50,left=150′);
//팝업창의 주소, 같은 도메인에 있어야 한다.
}
openMsgBox();
//–>
</script-x>
</head>
<body>
</body>
</html>
팝업창인 pop.htm에 삽입
<html>
<head>
<title></title>
<head>
<script-x language="JavaScript-x">
<!–
function setCookie( name, value, expiredays )
{
//같은 창에서만 안띄움.
//expiredays 값은 상관없음.
document.cookie = name + "=" + escape( value ) + "; path=/;";
}
function closeWin()
{
if ( document.myform.event.checked )
setCookie("memo", "no" , 1); // 1일 간 쿠키적용
}
//–>
</script-x>
</head>
<body onunload="closeWin()">
<form name="myform">
<input type="checkbox" name="event">다음부터 이 창을 열지않음
<input type=button value="닫기" onclick="self.close()">
</form>
</body>
</html>
13.링크걸어서 지정된 사이즈로 열기
<html>
<head>
<title>..</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script-x language=’JavaScript-x’>
<!–
function winopen(url)
{
window.open(url,"url","width=517,height=450,history=no,resizable=no,status=no,
scrollbars=yes,menubar=no");
}
//–>
</script-x>
</head>
<body>
<a HREF="javascript-x:winopen(‘주소’)">링크걸기</a>
</body>
</html>
14.자동으로 지정된 크기로 브라우저 열기
<html>
<head>
<title>..</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script-x language=’JavaScript-x’>
<!–
window.resizeTo(300,300);
window.moveTo(0,0);
//–>
</script-x>
</head>
<body>
<!–원하는 가로,세로의 크기를 입력해준다.–>
</body>
</html>
15.해상도에 맞추어 전체장으로 늘어남
<html>
<head>
<title>..</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script-x language="JavaScript-x">
function winMaximizer() {
if (document.layers) {
larg = screen.availWidth – 10;
altez = screen.availHeight – 20;
} else {
var larg = screen.availWidth;
var altez = screen.availHeight;
}
self.resizeTo(larg, altez);
self.moveTo(0, 0);
}
</script-x>
</head>
<body onload="winMaximizer()">
해상도에 맞추어 전체장으로 늘어남
</body>
</html>
