버튼 클릭시 레이어 팝업 띄우기. 그리고 손쉽게 닫기.

레이어팝업을 띄우고 닫기! 간단한 스크립트로 해결할수 있습니다.

아주 예전 자료이지만 다시 올려봅니다.
굉장히 많은 분들이 궁금해 하시고 쪽지 남겨 주셨던 내용이라 혹시나 도움이 될지도 모르니 ^_^;;

여러 방법이 있지만 가장 쉬운 방법으로 설명해 드리겠습니다.

 
(11번가에서 현재 팝업창으로 뜨고 있는 이벤트를 가져왔습니다. 광고 효과가 있을수 있으니 저작권으로 전화주시면.. 살려주세요.)
(레이어 팝업창은 아니지만, 팝업 이미지를 찾고 있던중 가져왔습니다. 양해바랍니다 -ㅂ-)

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> 

이렇게 작성하시면 한번 클릭하면 열리고 한번 더 클릭하면 닫히게 됩니다.

사실 이 방법은 아주 예전에 사용하던 방법이지만
지금까지도 간략하게 사용할 수 있을법한 코드라 생각이 되네요,

혹시나 궁금하셨던 분들은 이 javascript 로 레이어 팝업창 해결하시길 바랍니다~


히죽 -