팝업창에 관한 모든것(새창)

인터넷관련 2008. 2. 2. 09:37
기본형

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">
<A onclick="javascript:document.all.event.checked=true;closeWin();window.opener.document.location.href='event.html';" href="#None">
<IMG src="event.gif" border=0>
</A>
<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>
<A onclick="javascript:document.all.Notice.checked=true;closeWin();window.opener.document.location.href='event.html';" href="#None">
<IMG src="event.gif" border=0>
</A>
<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">
<A onclick="javascript:document.all.event.checked=true;closeWin();window.opener.document.location.href='event.html';" href="#None">
<IMG src="event.gif" border=0>
</A>
<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();">

'인터넷관련' 카테고리의 다른 글

웹페이지에 삽입된 동영상 및 음악 제어  (0) 2008.02.02
이미지 안쓰고 모서리(테두리) 둥근 테이블 만들기  (0) 2008.02.02
스포트라이트 효과  (0) 2008.02.02
PNG 그림파일 알파값 살리기  (0) 2008.02.02
필터 효과  (0) 2008.02.02
랜덤으로 스트라이핑 효과내기  (0) 2008.02.02
이미지 웨이브  (0) 2008.02.02
이미지에 마우스 올리면 선명해지게  (0) 2008.02.02
Posted by 알 수 없는 사용자
,

티스토리툴바