티스토리 뷰

반응형

index.html 이 열리면 popup.html 파일이 열리고, popup.html 안에 있는 이미지를 클릭하면 popup.html 이 닫히고 새로운 타겟 URL을 새창으로 엽니다.

1. 팝업창을 호출하기(index.html)

<body onload="javascript:void(window.open('popup.html','','width=401,height=441,top=0,left=0,status=no,toolbar=no, resizable=no,scrollbars=no'))">

2. 팝업창으로 사용할 이미지를 담은 html 파일을 만들고(popup.html)

<body>
<a href='#' onclick="newwin();""><img src="팝업 이미지" /></a>
</body>

3. 여백 제거를 위해 아래의 스타일 시트를 <head>에 추가(popup.html)

<style>
*{margin:0;padding:0;border:0;width:100%;overflow-x:hidden;overflow-y:hidden;}
</style>

4. <head>에 팝업창이 스스로 닫히며 최종 타겟이 열리게 하는 스크립트 추가(popup.html)

<script language="Javascript">
flag = 1;
function newwin() {
if (flag==1) {
open("최종 타겟 url", "_blank");
self.close();
}
}
</script>

 

출처 - http://1sam-online.blogspot.kr/2011/08/closing-popup-self-and-then-popups-new.html

반응형
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
«   2024/04   »
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 29 30
글 보관함