JS实现DIV提示框的效果

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title ></ title >
</ head >
< body >
< script  type ="text/javascript" > ...
//获取ID
function $id(id)...{
    return document.getElementById(id);
    }
function ShowMsg()...{
    document.writeln("<div id="msgdiv" style="position:absolute;display:none;border:2px solid #AFCEF9;"></div>");
    document.writeln("<div id="overdiv" style="position:absolute;display:none;">");
    document.writeln("</div>");
    //回调函数
    this.ok_callback=function()...{};
    this.cancel_callback=function()...{};
    this.msgobjname=""
    this.show=function(msgtitle,msgcontent,selecttype)...{
        var tempobj1=$id("msgdiv");
        var tempobj2=$id("overdiv");
        var msgobj=this.msgobjname;
          tempobj2.style.filter="alpha(opacity=75)";
          tempobj2.style.MozOpacity = 75/100;
        tempobj2.style.backgroundColor = "#000000";
          tempobj2.style.display = '';
        tempobj2.style.zIndex= 100;
        tempobj2.style.height= document.documentElement.clientHeight+"px";
        tempobj2.style.width= document.documentElement.clientWidth+"px";
            tempobj2.style.left=0;
            tempobj2.style.top=0;
            tempobj1.style.display="none";
        tempobj1.style.left= (document.documentElement.clientWidth)/3+"px";
        tempobj1.style.top= (document.documentElement.scrollTop+(document.documentElement.clientHeight)/3)+"px";
        tempobj1.style.display= '';
        tempobj1.style.width=400+"px";
        tempobj1.style.height=300+"px";
        tempobj1.style.zIndex= 200;
        tempobj1.style.backgroundColor = "#CDDAF1";
        var OutStr;
        OutStr="<div style="font-weight:bolder;text-align:center;height:20px;font-size:14px;background-color:#6088D2;cursor:move" canmove="true" forid="msgdiv">"+msgtitle+"</div>"
        OutStr=OutStr+"<div style="height:200px;text-align:center;font-size:12px;">"+msgcontent+"</div>"
           if(selecttype==1)...{
            OutStr=OutStr+"<div style="text-align:center;font-size:12px;"><input type="button" value="确定" οnclick=""+msgobj+".ok()">    <input type="button" value="取消" οnclick=""+msgobj+".cancel()"></div>"
        }
            else if(selecttype==2)...{
            OutStr=OutStr+"<div style="text-align:center;font-size:12px;"><input type="button" value="确定" οnclick=""+msgobj+".ok()"></div>"
        }
        
        tempobj1.innerHTML=OutStr;
        var md=false,mobj,ox,oy
         document.onmousedown=function(ev)
         ...{
            var ev=ev||window.event;
            var evt=ev.srcElement||ev.target;
             if(typeof(evt.getAttribute("canmove"))=="undefined")
             ...{
                 return;
             }
             if(evt.getAttribute("canmove"))
             ...{
                 md = true;
                 mobj = document.getElementById(evt.getAttribute("forid"));
                 ox = mobj.offsetLeft - ev.clientX;
                 oy = mobj.offsetTop - ev.clientY;
             }
         }
         document.onmouseup= function()...{md=false;}
         document.onmousemove= function(ev)
         ...{
            var ev=ev||window.event;
             if(md)
             ...{
                 mobj.style.left= (ev.clientX + ox)+"px";
                 mobj.style.top= (ev.clientY + oy)+"px";
             }
         }
        }
        this.ok = function()
        ...{
            $id('msgdiv').style.display='none';
            $id('overdiv').style.display='none';
            this.ok_callback();
        }
        this.cancel=function()...{
            $id('msgdiv').style.display='none';
            $id('overdiv').style.display='none';
            this.cancel_callback();
        }
    }

var ShowMsgo=new ShowMsg();
//设置对象名,供内部引用
ShowMsgo.msgobjname="ShowMsgo";
//定义回调函数
ShowMsgo.ok_callback=function()...{
    alert("ok");
    }
ShowMsgo.cancel_callback=function()...{
    alert("cancel")
    }
</ script >
< a  href ="javascript:ShowMsgo.show('test','test',1)" > Test1 </ a >
< a  href ="javascript:ShowMsgo.show('test','test',2)" > Test2 </ a >
< p > fasdfads </ p >
< p > fasdfads </ p >
< p > fasdfads </ p >
< p > fasdfads </ p >
< p > fasdfads </ p >
</ body >
</ html >