레이어팝업을 띄우고 닫기! 간단한 스크립트로 해결할수 있습니다. 아주 예전 자료이지만 다시 올려봅니다. 굉장히 많은 분들이 궁금해 하시고 쪽지 남겨 주셨던 내용이라 혹시나 도움이 될지도 모르니 ^_^;; 여러 방법이 있지만 가장 쉬운 방법으로 설명해 드리겠습니다.
(11번가에서 현재 팝업창으로 뜨고 있는 이벤트를 가져왔습니다. 광고 효과가 있을수 있으니 저작권으로 전화주시면.. 살려주세요.) 1.레이어를 만듭니다. <Div id="Pop" style="position:absolute;left:100px;top:100px;width:100px;height:100px;z-index:1;"></Div> 2.레이어속에 원하는 내용물을 넣어줍니다.<Div id="Pop"
style="position:absolute;left:100px;top:100px;width:100px;height:100px;z-index:1;"> 3.레이어의 초기상태를 보이지 않게 숨겨둡니다. <script> 5.작성한 펑션을 불러오면 원하시는 작업이 끝이 납니다. <a href="javascript:ViewLayer();">열어주세요</a> ============================================================ 간단하게 작성한것들이 사용함에 불편함이 있을거예요. <script> 이렇게 작성하시면 한번 클릭하면 열리고 한번 더 클릭하면 닫히게 됩니다. 사실 이 방법은 아주 예전에 사용하던 방법이지만 혹시나 궁금하셨던 분들은 이 javascript 로 레이어 팝업창 해결하시길 바랍니다~ 히죽 - 오랜만에 웹관련 포스팅 이네요. 저도 공부 안한지 꽤 되서 많이 부족하지만, 들고 있는 소스 공유 합니다. ==================================================================== *<head> 태그 안에 자바스크립트 삽입 ==================================================================== <script type="text/javascript"> <!-- //레이어 팝업 열기 var cnt = 0; function openLayer(IdName, tpos, lpos){ if(cnt==0){ cnt++; var pop = document.getElementById(IdName); pop.style.display = "block"; pop.style.top = tpos + "px"; pop.style.left = lpos + "px"; } } //레이어 팝업 닫기 function closeLayer(IdName){ var pop = document.getElementById(IdName); pop.style.display = "none"; cnt=0; } //--> </script> ==================================================================== *작은 이미지 클릭시 팝업 띄우기 ==================================================================== <a href="#" onclick="openLayer('layerPop',100,100)"> <img style="border:none;" src="a1.jpg" /> =>작은 이미지 삽입 </a> * openLayer('확대이미가 있는 레이어 id명', x축의위치 , y축의위치) =================================================================== *큰이미지는 레이어 스타일로 뜨고..큰 이미지 클릭시 닫힘 처리. ==================================================================== <div id="layerPop" style="position:absolute;width:514px;height:345px; display:none;border:3px solid #ccc;"> <a href="#" onclick="closeLayer('layerPop')" class="close"> <p><img style="border:none;" src="a2.jpg" /></p> =>큰 이미지 삽입 </a> </div> ==================================================================== *확대 이미지를 플래시로 할때... ==================================================================== <div id="layerPop" style="position:absolute;width:514px;height:345px; display:none;border:3px solid #ccc;"> 이위치에 플래시 태그 삽입.. </div> ==================================================================== *액션으로 닫기 처리(자바함수 호출) btn.addEventListener(MouseEvent.CLICK , big_link); function big_link(e:MouseEvent):void{ ExternalInterface.call("closeLayer" ,"layerPop"); } *테스트시 IE는 서버에서 테스트 하지 않아도 결과가 보이나.. 파이어폭스에서는 꼭 서버상에서만 결과가 나온다.. *<object id="아이디명"></object> => 꼭 id 값을 줘야한다... ==================================================================== 위 소스로 예제파일 만들어서 첨부합니다~ 파일 받으셔서 보시면 금방 이해 하실꺼에요^^ 주석으로도 표시해 두었습니다~ 긁어가기 안되니까 첨부파일 다운 받으셔야 겠죵??^^;; |
이미지 클릭시 레이어 팝업 - imiji keulligsi leieo pab-eob
관련 게시물
저작권 © 2024 moicapnhap Inc.
