[HTML] 레이어 팝업 만들기

팝업 차단기능으로인해 이제는 거의 필수가된 레이어 팝업입니다.
html에서 레이어사용을 일단 자제하는것이 맞습니다만...필요하다면이야 ㅎㅎㅎ;;

인터넷 뒤저보면 많은 코드들이 있지만 깔끔하게 정리된게 없어서 제가 쓰기위해 정리 하였습니다.

자바 스크립트

function LeyerPopupView(sDivName, nTop, nLeft, nHeight, nWidth) 
{
    /*
    레이어 팝업을 띄웁니다.
    팝업의 크기는 내용물의 크기에 영향을 받습니다.
    그렇기 때문에 내용물에 따라 정확하지 않은 크기가 적용될수 있습니다.
        
    매개변수 
    sDivName : 레이어 팝업으로 쓸 div id
    nTop : 팝업의 세로 위치
    nLeft : 팝업의 가로 위치
    nHeight : 팝업의 세로 크기
    nWidth : 팝업의 가로 크기
    */

    //사용할 레이어을 불러온다.
    var oPopup = document.getElementById(sDivName);
    //어을 표시하고
    oPopup.style.display = "block";

    //위치 및 크기 설정
    oPopup.style.top = nTop + "px";
    oPopup.style.left = nLeft + "px";
    oPopup.style.height = nHeight + "px";
    oPopup.style.width = nWidth + "px";
}

function LeyerPopupClose(sDivName) 
{
    /*
    어 팝업을 닫습니다.
        
    매개변수 
    sDivName : 레이어 팝업으로 쓸 div id
    */
    var oPopup = document.getElementById(sDivName);
    oPopup.style.display = "none";
}

레이어 팝업으로 사용할 Div

바디에 넣으시면 됩니다.

<form name="form1" style="background:url(https://t1.daumcdn.net/cfile/tistory/112DEF374EA24A6736); width:100%; height:100%;"   >
 <a href="#" onclick="LeyerPopupView('layerPopup',200,200,200,200)">
  <img src="http://www.google.co.kr/images/logo_sm.gif" border="0" alt="구글" />
 </a> <div id="layerPopup" style="display:none; position:absolute;">
  <strong>1번 레이어</strong>
  <ol>
   <li>layerPopup에서 display:none; 제거하면 팝업이 처음부터 나옵니다.</li>
   <li>- 당근 로리야스</li>
  </ol>
  <a href="#" onclick="LeyerPopupClose('layerPopup')" >close</a>
 </div>
 <a href="#" onclick="LeyerPopupView('layerPopup2',250,300,400,200)">
  <img src="http://icon.daumcdn.net/w/c/10/12/37691415937798319.png" border="0" alt="다음" />
 </a>
 <div id="layerPopup2" style="display:none; position:absolute;">
  <iframe src="http://blog.danggun.net" name="layerPopup2_iframe"></iframe>
  <a href="#" onclick="LeyerPopupClose('layerPopup2')" >close</a>
 </div>
</form>

테스트

설마 위코드를 어디에 어떻게 넣는지 삽질하고 계시다면 html부터 다시 공부하셔야 합니다  ㅡ,.ㅡ;;;
정 모르시겠으면 아래 테스트 패이지를 클릭해서 소스보기를 하시기 바랍니다.

테스트 해보기 클릭