버튼 클릭시 숨겨져있던 레이어 띄우기

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> 이렇게 작성하시면 한번 클릭하면 열리고 한번 더 클릭하면 닫히게 됩니다.