페이지를 열자마자 레이어팝업이 뜨고,
아래쪽 close버튼을 누르면 팝업이 사라집니다.
|
<div id="pop">
</div>
|
1. 팝업을 넣을 페이지 body안의 가장 아래쪽에 pop이란 id값을 가진 div를 추가합니다.
|
<style type="text/css"> </style>
|
2. <head>와 </head>사이에 위와같이 CSS 코드를 추가해줍니다.
width는 팝업창의 가로크기, height는 세로크기, background는 팝업 배경색상,
color는 팝업에 들어갈 글자 색상, top은 인터넷창 위에서 얼만큼 떨어진 위치에 둘지,
left는 왼쪽에서 얼만큼 떨어진 위치에 둘지, text-align:center는 글자 가운데 정렬
border:2px solid #000은 팝업 테두리 두께와 색상을 지정해준다.
|
<div id="pop"> <a href=""><b>팝업강좌 바로가기</b></a> </div>
|
3. 팝업의 내용이 들어갈 div 묶음을 추가하고 간략하게 내용을 넣어주었습니다.
height를 370px인 이유는 전체 400px에서 30px은 닫기버튼을 넣어주기 위함입니다.
팝업 내용이 텍스트가 아닌 이미지라면 <img src="경로">로 넣어주면 됩니다.
|
<div id="pop"> <a href=""><b>팝업강좌 바로가기</b></a> <div>
|
4. 닫기버튼으로 쓸 div를 추가하고 close라고 적어주었습니다.
width값은 글자 길이나 이미지 길이에 따라 다르게 지정해주어야 하며
margin:auto는 버튼을 가운데 정렬하는건데 필요없으면 빼도 됩니다.
여기까지 잘 따라하셨다면 사이트를 열어보면 레이어팝업창이 뜰겁니다.
하지만 자바스크립트 소스를 넣지 않았기 때문에 닫히지가 않겠죠.
이제 자바스크립트 소스를 입혀봅시다!
|
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
5. <head>와 </head>사이에 위와같이 넣어주어 제이쿼리 사용시 필요한 js를 로드합니다.
|
<script type="text/javascript">
|
6. <head>와 </head>사이에 위와같이 레이어 팝업을 닫아줄 스크립트 소스를 넣어줍니다.
$('#close').click(function() : close라는 id를 가진 div를 클릭 시
$('#pop').hide(); : pop라는 id를 가진 div는 사라진다