홈페이지를 운영을 하다 보면, 꼭 필요한 이벤트나 배너 이미지를 자바스크립트를 이용하여 팝업창에 띄우고, 먼저 팝업창에 띄울 배너를 만들어야겠지요?  window.open() 메서드를 이용하여 팝업 창을 나타내고, 이를 위해서는 2개의 웹페이지가 필요합니다. 하나는 배너가 들어간 팝업 창으로 나타낼 페이지이고, 또 하나는 팝업 창을 띄우도록 해주는 오픈 페이지입니다. 팝업 창 띄우기를 시작하기 전에 여러분의 브라우저(크롬 또는 익스플로러)에서 팝업 창이 차단되어 있으면 팝업 창을 나타낼 수 없습니다. 브라우저의 환경설정에 들어가서 팝업 창이 차단되어 있을 경우, 해제해 주세요. · 미리 체크! 크롬 팝업 창 차단/해제 방법: 크롬 주소 창 오른쪽 위에 더보기 버튼 클릭 먼저 배너 들어간 팝업 창입니다. <html> 한 번에 보기(Result 클릭) map 태그는 이미지 맵(클릭할 수 있는 영역을 설정하여 지정장소로 이동하거나, 창닫기와 같은 메서드 삽입)을 만드는 태그입니다. 저는 팝업창 닫기를 사용하기 위하여 map 태그에 window.close 메서드를 사용하였습니다. · map은 area 요소를 포함 좌표를 설정하기 위해서 저는 포토샵의 info 또는 그림판을 사용했습니다. 이제 팝업 창을 띄우도록 해주는 오픈 페이지입니다. window.open 메서드의 기본형은 여기서 주의할 사항! 새로운 html 문서를 생성하고, 아래의 코드를 삽입해 주세요. <javascript> 새 창의 페이지 주소는 "popuppage.html"(배너 이미지가 들어간 팝업 창)이며, 짠! 다음과 같이 오픈 페이지를 브라우저에서 실행하면 작성한 팝업 창(popuppage.html) 페이지가 결과 화면에 나타납니다. <script language="javascript"> // 이부분부터 수정할 필요 없습니다. function getCookie(name) { var Found = false var start, end var i = 0 while(i <= document.cookie.length) { start = i end = start + name.length if(document.cookie.substring(start, end) == name) { Found = true break } i++ } if(Found == true) { start = end + 1 end = document.cookie.indexOf(";", start) if(end < start) end = document.cookie.length return document.cookie.substring(start, end) } return "" } // 이부분 까지는 수정할 필요 없습니다. function openPopup() { var noticeCookie=getCookie("CookieName"); // 쿠키네임 지정 if (noticeCookie != "no") window.open('pop.html','pop','width=320,height=570,top=50,left=150'); // window.open('팝업창 웹페이지','윈도우명','width=350,height=400,top=50,left=150'); } openPopup(); // 자동으로 팝업 띄우기 </SCRIPT> 담엔 pop.html을 만들어서 소스 추가! <html> <head> </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.notice.checked ) // 폼네임 myform 은 동일해야 합니다. setCookie("CookieName", "no" , 1); // 부모창에서 지정한 쿠키네임과 일치 해야 합니다. } top.close(); } --> </script> <form name="myform"> <input type="checkbox" name="notice" onclick="closeWin()">오늘 하룻동안 페이지를 열지 않습니다 </form> <body> <body background = "3.jpg"> <image src=popup.JPG> </body> </html> 팝업창인것을 더 확연하게 보여주기 위해 그림을 몇개 넣어주었따~(타 사이트에서 따왓음) 이제 index.html을 열어 보면은 팝업창이 근사하게 뜬다~ ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ |
Html 자동 팝업창 띄우기 - Html jadong pab-eobchang ttuiugi
저작권 © 2024 toptenid.com Inc.
