개발자의 길

[자바스크립트]레이어 팝업 만들기 본문

2. JS

[자바스크립트]레이어 팝업 만들기

자르르 2010. 7. 20. 18:04



<script>
function instantLayerOn(objid){
 instantLayerOff();
    
 var evt = window.event;
 var vobj = document.getElementById(objid);
 //alert!(vobj.innerHTML);
 var objM = document.createElement("div");

 with (objM.style){
  position = "absolute";
       left = evt.clientX;
       top = evt.clientY +document.documentElement.scrollTop;
       width = 50;
       padding = 2
       background = "#ffffff";
       border = "1px solid #000000"; //위,양옆 테두리색깔
 }
 
 objM.id = "iLayerM";


    var obj = document.createElement("div");
   
 with (obj.style){
       //position = "absolute";
       //left = evt.clientX;
       //top = evt.clientY +document.documentElement.scrollTop;
       width = 50;
       padding = 3
//     height = 15;
       //scrollable = "true";
       //overflowY = "scroll";
       background = "#ffffff";
       border = "2px dotted #000000"; //위,양옆 테두리색깔
 }
 
 obj.id = "iLayer";
 obj.innerHTML = vobj.innerHTML;
//  obj.ondblclick = instantLayerOff;
// obj.onmouseout = instantLayerOff;
    objM.appendChild(obj);
    document.body.appendChild(objM);
 
 var html = "<table>";
 html += "<tr onclick='ready()' onMouseOver=this.style.backgroundColor='#F4CACB' onMouseOut=this.style.backgroundColor='' style='cursor:hand'><td>준비</td></tr>";
 html += "<tr onclick='worker()' onMouseOver=this.style.backgroundColor='#F4CACB' onMouseOut=this.style.backgroundColor='' style='cursor:hand'><td>진행</td></tr>";
 html += "<tr onclick='complete()' onMouseOver=this.style.backgroundColor='#F4CACB' onMouseOut=this.style.backgroundColor='' style='cursor:hand'><td>완료</td></tr>";
 html += "<tr onMouseOver=this.style.backgroundColor='#F4CACB' onMouseOut=this.style.backgroundColor='' onclick='instantLayerOff()' style='cursor:hand'><td>취소</td></tr>";
 html += "</table>";
 document.getElementById("iLayer").innerHTML = html;
}


function ready(){
 alert("준비");
}


function worker(){
 alert("진행");
}


function complete(){
 alert("완료");
}


// 레이어 삭제
function instantLayerOff(){
 if(null != document.getElementById('iLayer')){
     document.getElementById('iLayer').parentNode.removeChild( document.getElementById('iLayer')) ;
        document.getElementById('iLayerM').parentNode.removeChild( document.getElementById('iLayerM')) ;
        return;
 }
}
</script>

 

<input type=button name=aaa onclick="instantLayerOn('aaa')" value=확인>



이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
공유하기 링크
Comments