[자바스크립트]레이어 팝업 만들기
<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=확인>