특정 웹사이트에 접근하면 조그마한 형태의 팝업을 띄워 간단한 정보를 전달하는 형태를 자주 보실 수 있습니다. 이렇게 접속하자마자 뜨는 구조의 자바스크립트 팝업창 예제를 구현해 보겠습니다.
보통 이렇게 사이트에 접속하자마자 뜨는 팝업은 jsp의 body에 onload를 지정하거나 페이지 진입시 실행되는 스크립트 펑션에 의해 실행됩니다. 그리고 펑션안에 window.open 메소드를 구현하게 되면 작은 사이즈의 새창을 띄우는 형태의 팝업이 열리게 됩니다.
설명으로는 어려워보이지만 막상 소스를 보시면 어렵지않은데요. 간단한 예제를 통해서 한번 자바스크립트 팝업창 예제를 구현해 보도록 하겠습니다.
1. 팝업 예제
다음은 충청남도 교육청 홈페이지 인데요. 접속하자마자 다음과 같은 팝업이 떴습니다. 이와 같은 형태의 예제를 한번 구현해보겠습니다.
2. main.jsp
<script type="text/javascript"> function go_pop(){ window.open("pop.jsp","new","width=370, height=360, resizable=no, scrollbars=no, status=no, location=no, directories=no;"); } </script> <body onload="go_pop()"> <input type="button" value="팝업" onclick="go_pop()"> </body>
3. pop.jsp
<body> <center> 팝업창입니다.<br><br> <a onclick="window.close()" style="font-size: 40px; color: blue;" >닫기</a> </center> </body>
위의 예제를 실행했을 경우 main.jsp가 실행되게 되는데요.
이 페이지가 로드 되자마자 body의 onload가 실행됩니다.
그리고 해당 펑션의 window.open 자바스크립트 메소드에 의해 팝업이 열리게 됩니다.
또한, 닫기를 누르게 되면 window.close에 의해 팝업창이 닫히게 됩니다.
답글 남기기