자바스크립트 팝업창 띄우기 소스정리, Javascript PopUp // [Web] [Programming] [Script] [JavaScript]

Notice

Recent Posts

Recent Comments

Link

« 2025/02 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28

Tags more

Archives

Today

Total

관리 메뉴

<In Story>

자바스크립트 팝업창 띄우기 소스정리, Javascript PopUp // [Web] [Programming] [Script] [JavaScript] 본문

Programming/Web

자바스크립트 팝업창 띄우기 소스정리, Javascript PopUp // [Web] [Programming] [Script] [JavaScript]

<In Story, Hi story, History> 2015. 8. 15. 12:23

http://www.master4u.net/bbs/view.php?id=banner&no=295

팝업창 옵션

----------------------------------------

no, 1을 사용

width=800 : 팝업창의 넓이

height=600 : 팝업창의 높이

top=0 : 팝업창이 뜰 위치

left=0 : 팝업창이 뜰 위치

resizable=1 : 창크기 조정가능

scrollbars=1 : 스크롤바

menubar=1 : 메뉴

toolbar=1 : 메뉴아이콘

location=1 : 제목표시줄

directories=1 : 연결버튼(핫메일 등)

status=1 : 하단의 상태바

■ 입장시 팝업창 띄우기

----------------------------------------

<head>

<!--

function OpenWindow() {

window.open("insa-hi.html","_blank","top=0,left=0,width=470,height=340,resizable=1,scrollbars=no");

}

//-->

</script>

</head>

또는

■ 퇴장시 팝업창 띄우기

----------------------------------------

<!--

function popup()

{

window.open("testby.html", "_blank",

"top=0,left=0,width=463,height=178" +

",toolbar=1,status=1,scrollbars=0,resizable=0");

}

-->

</script>

또는

■ 클릭을 하면 팝업창이 뜨는 스크립트

----------------------------------------

<!--

function OpenWindow(url,intWidth,intHeight) {

window.open(url, "_blank", "width="+intWidth+",height="+intHeight+",resizable=1,scrollbars=1") ;

}

//-->

</script>

</head>

<body>

<br>

</center>

</body>

■ 입장시와 퇴장시에 모두 팝업창 띄우기

----------------------------------------

<!--

function popup( partner )

{

window.open("insa-hi.html", "_blank", "top=0,left=0,width=450,height=340",

"toolbar=1,status=1,scrollbars=1,resizable=1");

}

popup( );

-->

</scRIPT>

<!--

function popup()

{

window.open("insa-by.html", "_blank", "top=0,left=0,width=470,height=350",

"toolbar=1,status=1,scrollbars=0,resizable=0");

}

-->

</script>

----------------------------------------------------------------------------------------

■ 메뉴바나 상태바가 없는 그러한 작은 창이 뜨게 하는 방법은 다음과 같다.

자바스크립터의 window.open이라는 명령어를 주죠...^^

윈도우제어의 기본적인 틀은.. <script>window.open(띄우고자하는주소)</script>

이런꼴입니다...

여기에 옵션을 줄수 있습니다..

menubar yes/no : 윈도우의 menubar 표시여부

toolbar yes/no : 윈도우의 toolbar 표시여부

location yes/no : 윈도우의 location box 표시여부

directories yes/no : 윈도우의 directory button들의 출력여부

status yes/no : 윈도우의 상태표시줄 표시여부

scrollbars yes/no : 윈도우의 가로 세로 scrollbar 표시여부

resizable yes/no : 윈도우의 크기가 조정될 수 있는 지 결정

width : 윈도우의 너비 결정

height : 윈도우의 높이 결정

이런식이죠....

만약 창의 크기를 가로 350픽셀 세로 400픽셀 스크롤바를 주고 메뉴바를 주게해서 띄울려면

또한 자동팝업이 아니라 링크를 클릭하면 새창이 뜨게 할려면

이렇게 하시면 됩니다. 이때 중간에 "small"은 꼭 붙이시길..

http://jwchoi85.tistory.com/83

1.자동 띄우기

팝업창에 삽입

<html>

<head>

<!--

function pop(){

window.open("팝업창파일", "pop", "width=400,height=500,history=no,resizable=no,status=no,scrollbars=yes,menubar=no")

}

//-->

</script>

</head>

이벤트 팝업창을 띄우기

</body>

</html>

2.프레임이 있는 팝업창 닫기

팝업창에 삽입

<html>

<head>

<!--

function frameclose() {

parent.close()

window.close()

self.close()

}

//-->

</script>

</head>

<body>

</body>

</html>

3.팝업창 닫고 프레임이 없는 부모창에서 원하는 페이지로 이동하기

팝업창에 삽입

<html>

<head>

<!--

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>

<!--

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>

<!--

function closeWin(thetime) {

setTimeout("window.close()", thetime); //1000 은 1초를 의미합니다.

}

//-->

</script>

</head>

이창은 5초후 자동으로 창이 닫힘니다.<br>

</body>

</html>

less..

6.프레임 나눈 팝업창 한번에 닫기

팝업창에 삽입

<html>

<head>

<title>Close Window Timer</title>

<!--

function closeWin(thetime) {

setTimeout("window.close()", thetime); //1000 은 1초를 의미합니다.

}

//-->

</script>

</head>

이창은 5초후 자동으로 창이 닫힘니다.<br>

</body>

</html>

7.하루동안 팝업창 띄우지 않기 소스 예제1

부모창인 index.htm에 삽입

<html>

<head>

<!--

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>

<head>

<!--

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>

<input type="checkbox" name="event">다음부터 이 창을 열지않음

</form>

</body>

</html>

8.하루동안 팝업창 띄우지 않기 소스 예제2

부모창인 index.htm에 삽입

<html>

<head>

<head>

<!--

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>

<head>

<!--

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>

<form>

<input type=CHECKBOX name="Notice" value="">다시 팝업 안뜸

</form>

</body>

</html>

9.같은 브라우져에서 팝업 띄우기 않기

부모창인 index.htm에 삽입

<html>

<head>

<!--

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>

<head>

<!--

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>

<input type="checkbox" name="event">다음부터 이 창을 열지않음

</form>

</body>

</html>

10.팝업창 가운데에 자동띄우기

팝업창에 삽입

<html>

<head>

<!--

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>

</html>

11.부모창에서 클릭하면 팝업창 가운데에 띄우기

부모창에 삽입

<html>

<head>

<head>

<!--

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>

</body>

</html>

12.같은 브라우져에서만 팝업 띄우기 않기

부모창인 index.htm에 삽입 _새로 브라우져를 열면 팝업창이 뜸

<html>

<head>

<!--

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>

<head>

<!--

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>

<input type="checkbox" name="event">다음부터 이 창을 열지않음

</form>

</body>

</html>

13.링크걸어서 지정된 사이즈로 열기

<html>

<head>

<!--

function winopen(url)

{

window.open(url,"url","width=517,height=450,history=no,resizable=no,status=no,

scrollbars=yes,menubar=no");

}

//-->

</script>

</head>

<body>

</body>

</html>

14.자동으로 지정된 크기로 브라우저 열기

<html>

<head>

<!--

window.resizeTo(300,300);

window.moveTo(0,0);

//-->

</script>

</head>

<body>

</body>

</html>

15.해상도에 맞추어 전체장으로 늘어남

<html>

<head>

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>

</html>

16.이미지 클릭시 html문서없이 큰이미지로 새창띄우기

<html>

<head>

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')" onOver="window.status='Click to display picture'; return true;" onMouseOut="window.status=''">

</body>

</html>

17.몇초후 웹페이지이동하기 소스예제1

<html>

<head>

function nextWin()

{location = "이동할 URL"}

</script>

</head>

바로 이동한 원하는 사이트로 이동함

</body>

</html>

18.몇초후 웹페이지이동하기 소스예제2

<html>

<head>

self.location.replace('이동할 URL');

</script>

</head>

<body>

바로 이동한 원하는 사이트로 이동함

</body>

</html>

19.자동새로고침하기

<html>

<head>

<!--

setTimeout("history.go(0);", 3000); // 1초는 1000 입니다.

-->

</script>

</head>

<body>

자동새로고침하기

</body>

</html>

20.해상도에 따라 다른 웹페이지 열기

<html>

<head>

<!--

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>

</html>

21.HTML파일 없이 이미지 사이즈에 맞게 팝업창 띄우기.

<!-- //////////////////////////////////////////////////////////////

//*****************************************************************

// 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>

32.이미지사이즈에 맞게 새창이 열리며 휠마우스 효과를 내줌

그리고 메인(imgmove-main.html)에서 새창 띄워주는 부분

<!-- 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>

</center>

이 부분은 이미지를 보여줄 새창(img-move.html)입니다.

<style>

body {cursor:move;}

</style>

// 이미지는 별도로 제공하지 않습니다.

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>

저작자표시 비영리 변경금지

'Programming > Web' 카테고리의 다른 글

자바스크립트 딜레이 하기, Javascript Delay function // [Programming] [Script] [Web] [JavaScript] (0)	2015.10.04
자바스크립트 전역객체 window, Javascript Global object window // [Programming] [Script] [Web] [JavaScript] (0)	2015.09.12
자바스크립트 현재 경로 현재 프로토콜등 구하기, Javascript get location // [Programming] [Script] [Web] [JavaScript] (0)	2015.09.12
브라우저 탭을 메모장으로 활용하기 // [Programming] [Web] (1)	2015.08.27
웹서버 접속 확인 자바스크립트, Javascript check server connection // [Programming] [Script] [Web] [JavaScript] (0)	2015.08.24
자바스크립트 예제 소스 모음, Javascript examples // [Web] [Programming] [Script] [JavaScript] (0)	2015.08.15
웹하드 설치하기, ownCloud // [APM] [Program] [Web] [Webhard] [Network] (0)	2015.07.12
PHP기반 웹메일 솔루션, Roundcube Webmail 1.1.2 // [APM] [Program] [Web] [Network] (0)	2015.07.12
웹하드 설치하기, ajaXplore(pydio) //[OS] [Linux] [CentOS] [APM] [Program] [Web] [Webhard] [Network] (0)	2015.04.04
웹하드 설치하기, ajaXplore(pydio) // [MS Windows] [Windows 7] [APM] [Program] [Web] [Webhard] [Network] (0)	2015.04.04

'Programming/Web' Related Articles

<In Story>

자바스크립트 팝업창 띄우기 소스정리, Javascript PopUp // [Web] [Programming] [Script] [JavaScript] 본문

자바스크립트 팝업창 띄우기 소스정리, Javascript PopUp // [Web] [Programming] [Script] [JavaScript]

'Programming > Web' 카테고리의 다른 글

티스토리툴바