[스크립트] 팝업 관련 자바스크립트
페이지 정보
작성자 관리자 작성일15-06-18 15:56 조회7,927회 댓글0건본문
1. 옵션을 HEAD안에...
<script language="JavaScript">
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>
<a href=javascript:openNewWindow("주소입력")>새창열기</a>
2. 링크에 옵션을 지정...
<a href="javascript:;" 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 language="javascript">
<!--
function pop(){
window.open("팝업창파일", "pop", "width=400,height=500,history=no,resizable=no,status=no,scrollbars=yes,menubar=no")
}
//-->
</script>
</head>
<body onload="javascript:pop()">
이벤트 팝업창을 띄우기
</body>
</html>
2.프레임이 있는 팝업창 닫기
팝업창에 삽입
<html>
<head>
<title></title>
<script language="Javascript">
<!--
function frameclose() {
parent.close()
window.close()
self.close()
}
//-->
</script>
</head>
<body>
<a href="javascript:frameclose()">프레임셋 한방에 닫기</a>
</body>
</html>
3.팝업창 닫고 프레임이 없는 부모창에서 원하는 페이지로 이동하기
팝업창에 삽입
<html>
<head>
<title></title>
<script language="javascript">
<!--
function MovePage() {
window.opener.top.location.href="연결할파일"
window.close()
}
//-->
</script>
</head>
<body>
<a href="javascript:MovePage();">자세한내용보기</a>
</body>
</html>
4.팝업창 닫고 프레임이 있는 부모창에서 원하는 페이지로 이동하기
팝업창에 삽입하고 팝업창의 설정은 프레임셋 페이지에 해야함
오픈창이 아닐경우에는 window.top.프레임이름.location.href="연결할파일" 적용한다
<html>
<head>
<title></title>
<script language="javascript">
<!--
function MovePage() {
window.opener.top.프레임이름.location.href="연결할파일"
//팝업창이 아닌것우..
window.close()
}
//-->
</script>
</head>
<body>
<a href="javascript:MovePage();">자세한내용보기</a>
</body>
</html>
5.팝업창 자동으로 닫기
팝업창에 삽입
<html>
<head>
<title>Close Window Timer</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script language="JavaScript">
<!--
function closeWin(thetime) {
setTimeout("window.close()", thetime); //1000 은 1초를 의미합니다.
}
//-->
</script>
</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 language="JavaScript">
<!--
function closeWin(thetime) {
setTimeout("window.close()", thetime); //1000 은 1초를 의미합니다.
}
//-->
</script>
</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 language="javascript">
<!--
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>
</head>
<body>
</body>
</html>
팝업창인 pop.htm에 삽입
<html>
<head>
<title></title>
<head>
<script language="JavaScript">
<!--
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>
</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 LANGUAGE="JavaScript">
<!--
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>
</head>
<body>
</body>
</html>
팝업창인 pop.htm에 삽입
<html>
<head>
<title></title>
<head>
<SCRIPT language="JavaScript">
<!--
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>
</head>
<body onunload="closeWin()">
<form>
<input type=CHECKBOX name="Notice" value="">다시 팝업 안뜸
<a href="javascript: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 language="javascript">
<!--
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>
</head>
<body>
</body>
</html>
팝업창인 pop.htm에 삽입
<html>
<head>
<title></title>
<head>
<script language="JavaScript">
<!--
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>
</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 language="JavaScript">
<!--
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>
</head>
<body onLoad="winCentre()">
</body>
</html>
11.부모창에서 클릭하면 팝업창 가운데에 띄우기
부모창에 삽입
<html>
<head>
<title></title>
<head>
<script language="JavaScript">
<!--
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>
<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 language="javascript">
<!--
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>
</head>
<body>
</body>
</html>
팝업창인 pop.htm에 삽입
<html>
<head>
<title></title>
<head>
<script language="JavaScript">
<!--
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>
</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 language='JavaScript'>
<!--
function winopen(url)
{
window.open(url,"url","width=517,height=450,history=no,resizable=no,status=no,
scrollbars=yes,menubar=no");
}
//-->
</script>
</head>
<body>
<a HREF="javascript:winopen('주소')">링크걸기</a>
</body>
</html>
14.자동으로 지정된 크기로 브라우저 열기
<html>
<head>
<title>..</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script language='JavaScript'>
<!--
window.resizeTo(300,300);
window.moveTo(0,0);
//-->
</script>
</head>
<body>
<!--원하는 가로,세로의 크기를 입력해준다.-->
</body>
</html>
15.해상도에 맞추어 전체장으로 늘어남
<html>
<head>
<title>..</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script language="JavaScript">
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>
</head>
<body onload="winMaximizer()">
해상도에 맞추어 전체장으로 늘어남
</body>
</html>
16.이미지 클릭시 html문서없이 큰이미지로 새창띄우기
<html>
<head>
<title>..</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script language="JavaScript">
var win1Open = null
function displayImage(picName, windowName,
windowWidth, windowHeight){
return window.open(picName,windowName,"toolbar=no,
scrollbars=no,resizable=no,width=" + (parseInt(windowWidth)+20) + ",height=" + (parseInt(windowHeight)+15))
} function winClose(){
if(win1Open != null) win1Open.close()
} function doNothing(){}
</script> <script language="JavaScript1.1">
function displayImage(picName, windowName,
windowWidth, windowHeight){
var winHandle = window.open("" ,windowName,"toolbar=no,scrollbars=no,
resizable=no,width=" + windowWidth + ",height=" + windowHeight)
if(winHandle != null){
var htmlString = "<html><head><title>Picture</title></head>"
htmlString += "<body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0>"
htmlString += "<a href=javascript:window.close()><img src=" + picName + " border=0
alt=닫기></a>"
htmlString += "</body></html>"
winHandle.document.open()
winHandle.document.write(htmlString)
winHandle.document.close()
}
if(winHandle != null) winHandle.focus()
return winHandle
}
</script>
</head>
<body>
<a href="javascript:doNothing()"
onClick="win1Open=displayImage('큰 이미지파일', 'popWin1', '300', '400')" onMouseOver="window.status='Click to display picture'; return true;" onMouseOut="window.status=''">
<img src=이미지파일" border="0"></a>
</body>
</html>
17.몇초후 웹페이지이동하기 소스예제1
<html>
<head>
<title>..</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script language="JavaScript">
function nextWin()
{location = "이동할 URL"}
</script>
</head>
<body onLoad="setTimeout('nextWin()', 1000)"> <!--1000 이 1초 입니다.-->
바로 이동한 원하는 사이트로 이동함
</body>
</html>
18.몇초후 웹페이지이동하기 소스예제2
<html>
<head>
<title>..</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script language="JavaScript">
self.location.replace('이동할 URL');
</script>
</head>
<body>
바로 이동한 원하는 사이트로 이동함
</body>
</html>
19.자동새로고침하기
<html>
<head>
<title>..</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script language="JavaScript">
<!--
setTimeout("history.go(0);", 3000); // 1초는 1000 입니다.
-->
</script>
</head>
<body>
자동새로고침하기
</body>
</html>
20.해상도에 따라 다른 웹페이지 열기
<html>
<head>
<title>..</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script language="JavaScript">
<!--
function redirectPage() {
var url800x600 = "main1.html"; //800*600 에서 열릴문서
var url1024x768 = "main2.html"; //1024*768 에서 열릴문서
var url1152x864 = "main3.html"; //1152*864 에서 열릴문서
if ((screen.width == 800) && (screen.height == 600))
window.location.href= url800x600;
else if ((screen.width == 1024) && (screen.height == 768))
window.location.href= url1024x768;
else if ((screen.width == 1152) && (screen.height == 864))
window.location.href= url1152x864;
else window.location.href= url800x600;
}
//-->
</script>
</head>
<body Onload="redirectPage()">
</body>
</html>
30.HTML파일 없이 이미지 사이즈에 맞게 팝업창 띄우기.
<script Language="Javascript">
<!-- //////////////////////////////////////////////////////////////
//*****************************************************************
// Web Site: http://www.CginJs.Com
// CGI 와 JavaScript가 만났을 때 = C.n.J ☞ http://www.CginJs.Com
// CGI 와 JavaScript가 만났을 때 = C.n.J ☞ webmaster@CginJs.Com
// C.n.J 자바스크립트 자동 생성 마법사 ☞ http://www.CginJs.Com
// C.n.J 자바스크립트(JavaScript) 가이드 ☞ http://www.CginJs.Com
// C.n.J CSS(Cascading Style Sheet) 가이드 ☞ http://www.CginJs.Com
// Editer : Web Site: http://www.CginJs.Com
//*****************************************************************
/////////////////////////////////////////////////////////////// -->
var cnj_img_view = null;
function cnj_win_view(img){
img_conf1= new Image();
img_conf1.src=(img);
cnj_view_conf(img);
}
function cnj_view_conf(img){
if((img_conf1.width!=0)&&(img_conf1.height!=0)){
cnj_view_img(img);
} else {
funzione="cnj_view_conf('"+img+"')";
intervallo=setTimeout(funzione,20);
}
}
function cnj_view_img(img){
if(cnj_img_view != null) {
if(!cnj_img_view.closed) { cnj_img_view.close(); }
}
cnj_width=img_conf1.width+20;
cnj_height=img_conf1.height+20;
str_img="width="+cnj_width+",height="+cnj_height;
cnj_img_view=window.open(img,"cnj_img_open",str_img);
cnj_img_view.focus();
return;
}
</script>
<a href="javascript:cnj_win_view('../img/cnjlogo.gif')"><img src="../img/cnjlogo.gif" border="0" width="247" height="55"></a>
32.이미지사이즈에 맞게 새창이 열리며 휠마우스 효과를 내줌
그리고 메인(imgmove-main.html)에서 새창 띄워주는 부분
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function cnjOpen() {
window.open('img-move.html','cnjOpenWin','width=350,height=250,toolbar=0,scrollbars=0,location=0,status=0,menubar=0,resizable=0');
}
// End -->
</script>
<a href="javascript:cnjOpen()"><img src="test.jpg" width="200" height="150" border="0"></a>
</center>
이 부분은 이미지를 보여줄 새창(img-move.html)입니다.
<style>
body {cursor:move;}
</style>
<body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0 onLoad="fitWindowSize();">
<SCRIPT LANGUAGE="JavaScript">
// 이미지는 별도로 제공하지 않습니다.
<!-- CGI 와 JavaScript가 만났을 때=CnJ ☞ http://www.cginjs.com -->
<!-- CGI 와 JavaScript가 만났을 때=CnJ ☞ webmaster@cginjs.com -->
var ie = 1;
var windowX, windowY;
var bLargeImage = 0;
var x,y;
var InitX = 500;
// 이미지가 새창에 맞게 조절되는 부분
function fitWindowSize()
{
if( ie )
{
window.resizeTo( InitX, InitX );
width = InitX - (document.body.clientWidth - document.images[0].width);
height = InitX - (document.body.clientHeight - document.images[0].height);
windowX = (window.screen.width-width)/2;
windowY = (window.screen.height-height)/2;
if( width > screen.width-50 )
{
width = screen.width-50;
windowX = 20;
bLargeImage = 1;
}
if( height > screen.height-80 )
{
height = screen.height-80;
windowY = 20;
bLargeImage = 1;
}
window.moveTo( windowX, windowY );
window.resizeTo( width, height+4 );
}
else
{
window.innerWidth = document.layers[0].document.images[0].width;
window.innerHeight = document.layers[0].document.images[0].height;
}
}
// 휠마우스 효과
function move() {
if(bLargeImage){ window.scroll(window.event.clientX - 50,window.event.clientY -50);
}
}
// 오른쪽 왼쪽 마우스 클릭시 창닫는 부분
function click() {
if ((event.button==1) || (event.button==2) || (event.button==3)) {
top.self.close();
}
}
document.onmousedown=click
</script>
<img src="http://www.cginjs.com/cgi/js/test.jpg" border="0" ONMOUSEMOVE="move();">
<script language="JavaScript">
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>
<a href=javascript:openNewWindow("주소입력")>새창열기</a>
2. 링크에 옵션을 지정...
<a href="javascript:;" 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 language="javascript">
<!--
function pop(){
window.open("팝업창파일", "pop", "width=400,height=500,history=no,resizable=no,status=no,scrollbars=yes,menubar=no")
}
//-->
</script>
</head>
<body onload="javascript:pop()">
이벤트 팝업창을 띄우기
</body>
</html>
2.프레임이 있는 팝업창 닫기
팝업창에 삽입
<html>
<head>
<title></title>
<script language="Javascript">
<!--
function frameclose() {
parent.close()
window.close()
self.close()
}
//-->
</script>
</head>
<body>
<a href="javascript:frameclose()">프레임셋 한방에 닫기</a>
</body>
</html>
3.팝업창 닫고 프레임이 없는 부모창에서 원하는 페이지로 이동하기
팝업창에 삽입
<html>
<head>
<title></title>
<script language="javascript">
<!--
function MovePage() {
window.opener.top.location.href="연결할파일"
window.close()
}
//-->
</script>
</head>
<body>
<a href="javascript:MovePage();">자세한내용보기</a>
</body>
</html>
4.팝업창 닫고 프레임이 있는 부모창에서 원하는 페이지로 이동하기
팝업창에 삽입하고 팝업창의 설정은 프레임셋 페이지에 해야함
오픈창이 아닐경우에는 window.top.프레임이름.location.href="연결할파일" 적용한다
<html>
<head>
<title></title>
<script language="javascript">
<!--
function MovePage() {
window.opener.top.프레임이름.location.href="연결할파일"
//팝업창이 아닌것우..
window.close()
}
//-->
</script>
</head>
<body>
<a href="javascript:MovePage();">자세한내용보기</a>
</body>
</html>
5.팝업창 자동으로 닫기
팝업창에 삽입
<html>
<head>
<title>Close Window Timer</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script language="JavaScript">
<!--
function closeWin(thetime) {
setTimeout("window.close()", thetime); //1000 은 1초를 의미합니다.
}
//-->
</script>
</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 language="JavaScript">
<!--
function closeWin(thetime) {
setTimeout("window.close()", thetime); //1000 은 1초를 의미합니다.
}
//-->
</script>
</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 language="javascript">
<!--
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>
</head>
<body>
</body>
</html>
팝업창인 pop.htm에 삽입
<html>
<head>
<title></title>
<head>
<script language="JavaScript">
<!--
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>
</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 LANGUAGE="JavaScript">
<!--
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>
</head>
<body>
</body>
</html>
팝업창인 pop.htm에 삽입
<html>
<head>
<title></title>
<head>
<SCRIPT language="JavaScript">
<!--
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>
</head>
<body onunload="closeWin()">
<form>
<input type=CHECKBOX name="Notice" value="">다시 팝업 안뜸
<a href="javascript: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 language="javascript">
<!--
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>
</head>
<body>
</body>
</html>
팝업창인 pop.htm에 삽입
<html>
<head>
<title></title>
<head>
<script language="JavaScript">
<!--
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>
</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 language="JavaScript">
<!--
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>
</head>
<body onLoad="winCentre()">
</body>
</html>
11.부모창에서 클릭하면 팝업창 가운데에 띄우기
부모창에 삽입
<html>
<head>
<title></title>
<head>
<script language="JavaScript">
<!--
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>
<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 language="javascript">
<!--
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>
</head>
<body>
</body>
</html>
팝업창인 pop.htm에 삽입
<html>
<head>
<title></title>
<head>
<script language="JavaScript">
<!--
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>
</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 language='JavaScript'>
<!--
function winopen(url)
{
window.open(url,"url","width=517,height=450,history=no,resizable=no,status=no,
scrollbars=yes,menubar=no");
}
//-->
</script>
</head>
<body>
<a HREF="javascript:winopen('주소')">링크걸기</a>
</body>
</html>
14.자동으로 지정된 크기로 브라우저 열기
<html>
<head>
<title>..</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script language='JavaScript'>
<!--
window.resizeTo(300,300);
window.moveTo(0,0);
//-->
</script>
</head>
<body>
<!--원하는 가로,세로의 크기를 입력해준다.-->
</body>
</html>
15.해상도에 맞추어 전체장으로 늘어남
<html>
<head>
<title>..</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script language="JavaScript">
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>
</head>
<body onload="winMaximizer()">
해상도에 맞추어 전체장으로 늘어남
</body>
</html>
16.이미지 클릭시 html문서없이 큰이미지로 새창띄우기
<html>
<head>
<title>..</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script language="JavaScript">
var win1Open = null
function displayImage(picName, windowName,
windowWidth, windowHeight){
return window.open(picName,windowName,"toolbar=no,
scrollbars=no,resizable=no,width=" + (parseInt(windowWidth)+20) + ",height=" + (parseInt(windowHeight)+15))
} function winClose(){
if(win1Open != null) win1Open.close()
} function doNothing(){}
</script> <script language="JavaScript1.1">
function displayImage(picName, windowName,
windowWidth, windowHeight){
var winHandle = window.open("" ,windowName,"toolbar=no,scrollbars=no,
resizable=no,width=" + windowWidth + ",height=" + windowHeight)
if(winHandle != null){
var htmlString = "<html><head><title>Picture</title></head>"
htmlString += "<body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0>"
htmlString += "<a href=javascript:window.close()><img src=" + picName + " border=0
alt=닫기></a>"
htmlString += "</body></html>"
winHandle.document.open()
winHandle.document.write(htmlString)
winHandle.document.close()
}
if(winHandle != null) winHandle.focus()
return winHandle
}
</script>
</head>
<body>
<a href="javascript:doNothing()"
onClick="win1Open=displayImage('큰 이미지파일', 'popWin1', '300', '400')" onMouseOver="window.status='Click to display picture'; return true;" onMouseOut="window.status=''">
<img src=이미지파일" border="0"></a>
</body>
</html>
17.몇초후 웹페이지이동하기 소스예제1
<html>
<head>
<title>..</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script language="JavaScript">
function nextWin()
{location = "이동할 URL"}
</script>
</head>
<body onLoad="setTimeout('nextWin()', 1000)"> <!--1000 이 1초 입니다.-->
바로 이동한 원하는 사이트로 이동함
</body>
</html>
18.몇초후 웹페이지이동하기 소스예제2
<html>
<head>
<title>..</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script language="JavaScript">
self.location.replace('이동할 URL');
</script>
</head>
<body>
바로 이동한 원하는 사이트로 이동함
</body>
</html>
19.자동새로고침하기
<html>
<head>
<title>..</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script language="JavaScript">
<!--
setTimeout("history.go(0);", 3000); // 1초는 1000 입니다.
-->
</script>
</head>
<body>
자동새로고침하기
</body>
</html>
20.해상도에 따라 다른 웹페이지 열기
<html>
<head>
<title>..</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script language="JavaScript">
<!--
function redirectPage() {
var url800x600 = "main1.html"; //800*600 에서 열릴문서
var url1024x768 = "main2.html"; //1024*768 에서 열릴문서
var url1152x864 = "main3.html"; //1152*864 에서 열릴문서
if ((screen.width == 800) && (screen.height == 600))
window.location.href= url800x600;
else if ((screen.width == 1024) && (screen.height == 768))
window.location.href= url1024x768;
else if ((screen.width == 1152) && (screen.height == 864))
window.location.href= url1152x864;
else window.location.href= url800x600;
}
//-->
</script>
</head>
<body Onload="redirectPage()">
</body>
</html>
30.HTML파일 없이 이미지 사이즈에 맞게 팝업창 띄우기.
<script Language="Javascript">
<!-- //////////////////////////////////////////////////////////////
//*****************************************************************
// Web Site: http://www.CginJs.Com
// CGI 와 JavaScript가 만났을 때 = C.n.J ☞ http://www.CginJs.Com
// CGI 와 JavaScript가 만났을 때 = C.n.J ☞ webmaster@CginJs.Com
// C.n.J 자바스크립트 자동 생성 마법사 ☞ http://www.CginJs.Com
// C.n.J 자바스크립트(JavaScript) 가이드 ☞ http://www.CginJs.Com
// C.n.J CSS(Cascading Style Sheet) 가이드 ☞ http://www.CginJs.Com
// Editer : Web Site: http://www.CginJs.Com
//*****************************************************************
/////////////////////////////////////////////////////////////// -->
var cnj_img_view = null;
function cnj_win_view(img){
img_conf1= new Image();
img_conf1.src=(img);
cnj_view_conf(img);
}
function cnj_view_conf(img){
if((img_conf1.width!=0)&&(img_conf1.height!=0)){
cnj_view_img(img);
} else {
funzione="cnj_view_conf('"+img+"')";
intervallo=setTimeout(funzione,20);
}
}
function cnj_view_img(img){
if(cnj_img_view != null) {
if(!cnj_img_view.closed) { cnj_img_view.close(); }
}
cnj_width=img_conf1.width+20;
cnj_height=img_conf1.height+20;
str_img="width="+cnj_width+",height="+cnj_height;
cnj_img_view=window.open(img,"cnj_img_open",str_img);
cnj_img_view.focus();
return;
}
</script>
<a href="javascript:cnj_win_view('../img/cnjlogo.gif')"><img src="../img/cnjlogo.gif" border="0" width="247" height="55"></a>
32.이미지사이즈에 맞게 새창이 열리며 휠마우스 효과를 내줌
그리고 메인(imgmove-main.html)에서 새창 띄워주는 부분
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function cnjOpen() {
window.open('img-move.html','cnjOpenWin','width=350,height=250,toolbar=0,scrollbars=0,location=0,status=0,menubar=0,resizable=0');
}
// End -->
</script>
<a href="javascript:cnjOpen()"><img src="test.jpg" width="200" height="150" border="0"></a>
</center>
이 부분은 이미지를 보여줄 새창(img-move.html)입니다.
<style>
body {cursor:move;}
</style>
<body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0 onLoad="fitWindowSize();">
<SCRIPT LANGUAGE="JavaScript">
// 이미지는 별도로 제공하지 않습니다.
<!-- CGI 와 JavaScript가 만났을 때=CnJ ☞ http://www.cginjs.com -->
<!-- CGI 와 JavaScript가 만났을 때=CnJ ☞ webmaster@cginjs.com -->
var ie = 1;
var windowX, windowY;
var bLargeImage = 0;
var x,y;
var InitX = 500;
// 이미지가 새창에 맞게 조절되는 부분
function fitWindowSize()
{
if( ie )
{
window.resizeTo( InitX, InitX );
width = InitX - (document.body.clientWidth - document.images[0].width);
height = InitX - (document.body.clientHeight - document.images[0].height);
windowX = (window.screen.width-width)/2;
windowY = (window.screen.height-height)/2;
if( width > screen.width-50 )
{
width = screen.width-50;
windowX = 20;
bLargeImage = 1;
}
if( height > screen.height-80 )
{
height = screen.height-80;
windowY = 20;
bLargeImage = 1;
}
window.moveTo( windowX, windowY );
window.resizeTo( width, height+4 );
}
else
{
window.innerWidth = document.layers[0].document.images[0].width;
window.innerHeight = document.layers[0].document.images[0].height;
}
}
// 휠마우스 효과
function move() {
if(bLargeImage){ window.scroll(window.event.clientX - 50,window.event.clientY -50);
}
}
// 오른쪽 왼쪽 마우스 클릭시 창닫는 부분
function click() {
if ((event.button==1) || (event.button==2) || (event.button==3)) {
top.self.close();
}
}
document.onmousedown=click
</script>
<img src="http://www.cginjs.com/cgi/js/test.jpg" border="0" ONMOUSEMOVE="move();">
댓글목록
등록된 댓글이 없습니다.
