팝업창 만들기 소스

프론트엔드 언어2017. 3. 22. 21:51

팝업창 만들기 소스

- 팝업창 닫는 소스

- 팝업창 만들기 소스

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.자동 띄우기
팝업창에 삽입

이벤트 팝업창을 띄우기

추천,클릭, 댓글은 필자에게 큰 힘이 됩니다.

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

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

<a href="javascript:MovePage();">자세한내용보기</a>

4.팝업창 닫고 프레임이 있는 부모창에서 원하는 페이지로 이동하기
팝업창에 삽입하고 팝업창의 설정은 프레임셋 페이지에 해야함
오픈창이 아닐경우에는 window.top.프레임이름.location.href="연결할파일" 적용한다

<a href="javascript:MovePage();">자세한내용보기</a>

5.팝업창 자동으로 닫기
팝업창에 삽입

<head>
<title>Close Window Timer</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script language="JavaScript">

</script>
</head>

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

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

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

7.하루동안 팝업창 띄우지 않기 소스 예제1
부모창인 index.htm에 삽입

팝업창인 pop.htm에 삽입

8.하루동안 팝업창 띄우지 않기 소스 예제2
부모창인 index.htm에 삽입

팝업창인 pop.htm에 삽입

9.같은 브라우져에서 팝업 띄우기 않기
부모창인 index.htm에 삽입

팝업창인 pop.htm에 삽입

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

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

12.같은 브라우져에서만 팝업 띄우기 않기
부모창인 index.htm에 삽입 _새로 브라우져를 열면 팝업창이 뜸

팝업창인 pop.htm에 삽입

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

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

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

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

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

16.이미지 클릭시 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 = "<head><title>Picture</title></head>" 
htmlString += ""
htmlString += "<a href=javascript:window.close()><img src=" + picName + " border=0 
alt=닫기></a>"
htmlString += ""
winHandle.document.open()
winHandle.document.write(htmlString)
winHandle.document.close()
} 
if(winHandle != null) winHandle.focus()
return winHandle
}
</script>
</head>

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

<head>
<title>..</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> 
<script language="JavaScript">
function nextWin()
{location = "이동할 URL"}
</script> 
</head> 
 
바로 이동한 원하는 사이트로 이동함

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

<head>
<title>..</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> 
<script language="JavaScript">
self.location.replace('이동할 URL');
</script> 
</head>

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

19.자동새로고침하기

자동새로고침하기

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

21.HTML파일 없이 이미지 사이즈에 맞게 팝업창 띄우기
<script Language="Javascript">
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>

22.이미지사이즈에 맞게 새창이 열리며 휠마우스 효과를 내줌
그리고 메인(imgmove-main.html)에서 새창 띄워주는 부분
<SCRIPT LANGUAGE="JavaScript">

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

<SCRIPT LANGUAGE="JavaScript">
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="이미지경로" border="0" ONMOUSEMOVE="move();">

저작자표시 비영리 동일조건 (새창열림)

'프론트엔드 언어' 카테고리의 다른 글

쿠키 생성 및 가져오기 (0)	2017.03.22
엑셀 다운로드 (0)	2017.03.22
사이드 스크롤 (0)	2017.03.22
HTML TABLE 중복 셀 병합 (0)	2017.03.22
책갈피 만들기 (0)	2017.03.22

Posted by EL2A

EL2A의 티스토리

팝업창 만들기 소스

'프론트엔드 언어' 카테고리의 다른 글

카테고리

태그목록

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

달력

티스토리툴바

« » 2026.2
일	월	화	수	목	금	토
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