1.레이어를 만듭니다.
<Div id="Pop" style="position:absolute; left:100px; top:100px; width:100px; height:100px; z-index:1;"></Div>
Pop라는 이름의 레이어를 이렇게 생성합니다.
윈도우창 왼쪽에서 100px 위에서 100px 떨어진 곳에 시작하는 레이어죠.
2.레이어속에 원하는 내용물을 넣어줍니다.
<Div id="Pop" style="position:absolute; left:100px; top:100px; width:100px; height:100px; z-index:1;">
<img src="이미지주소">
</Div>
3.레이어의 초기상태를 보이지 않게 숨겨둡니다.
<Div id="Pop" style="position:absolute; left:100px; top:100px; width:100px; height:100px; z-index:1;display:none;">
<img src="이미지주소">
</Div>
4.이제 클릭할 경우 미리 만들어진 저 Pop 라는 레이어를 보여주면 됩니다.
간단한 스크립트를 작성하겠습니다.
<script>
function ViewLayer(){
document.getElementById("Pop").style.display='inline'
}
</script>
5.작성한 펑션을 불러오면 원하시는 작업이 끝이 납니다.
<a href="javascript:ViewLayer();">열어주세요</a>
============================================================
간단하게 작성한것들이 사용함에 불편함이 있을거예요.
예를들어 열었는 레이어를 닫아준다던가 하는 그런것들요.
자 그럼 스크립트를 조금 수정해서 사용하기 편하게 만들어 보겠습니다.
<script>
function ViewLayer(){
//만일 Pop라는 녀석이 닫혀있다면??
if(document.getElementById("Pop").style.display=="none"){
//열어주어라
document.getElementById("Pop").style.display='inline'
//그렇지 않은 모든 경우라면??
}else{
//닫아주어라
document.getElementById("Pop").style.display='none'
}
}
</script>
이렇게 작성하시면 한번 클릭하면 열리고 한번 더 클릭하면 닫히게 됩니다.
출처 : http://blog.naver.com/2verworks