纯JavaScript+HTML+CSS 的div弹出框

<style>
.mask {
    width:100%;
    height:100%;
    position: absolute;
    top:0;
    left:0;
    filter: alpha(opacity=40);
    -moz-opacity:0.4;
    opacity:0.4;
    background-color: #ffffff;
    z-index:2;
    display: none;
}
div.sample_popup {
    height:auto;
    border:10px solid #646464;
    width:300px;
}
div.menu_form_header {
    background:#333333;
}
div.sample_popup div.menu_form_header {
    border-bottom: 0px;
    cursor: default;
    width:100%;
    height:40px;
    line-height: 40px;
    text-align:center;
    text-decoration: none;
    font-family: "Times New Roman", Serif;
    font-weight:bold;
    font-size:14px;
    color:#fff;
}
div.menu_form_body {
    width:100%;
    height:80px;
    font-size:12px;
    line-height:80px;
    text-align:center;
    background:#fff;
    color:#333;
}
div.sample_popup input.menu_form_exit {
    float: right;
    margin: 4px 5px 0px 0px;
    cursor: pointer;
}
div.sample_popup .button {
    width:50px;
    height:19px;
    border:0;
    background:#fff;
    cursor:pointer;
    color:#333;
}
div.sample_popup a {
    color:#333;
    display:inline-block;
    width:50px;
    height:19px;
 *line-height:17px;
}
</style>

<script type="text/javascript">
    var DivWindow= function(
    popup//最外层div id*/
    ,popup_drag//拖动div id*/
    ,popup_ok//确定按钮id*/
    ,okButton//触发服务器端确定按钮id*
    ,popup_exit//退出按钮id*/
    ,exitButton//触发服务器端退出按钮id*/
    ,varwidth,varheight,zindex){
            this.popup =popup ; //窗口名称
            this.popup_drag=popup_drag;
            this.height =varheight ; //窗口高度，并没用来设置窗口高度宽度，用来定位在屏幕的位置
            this.width =varwidth ; //窗口宽度
            this.popup_ok=popup_ok;
            this.okButton=okButton;
            this.popup_exit=popup_exit;
            this.exitButton=exitButton;
            this.zindex=zindex;
            this.init = function(){ //初始化窗口
               this.popupShow();
               this.startDrag(); //设置拖动
               this.setCommondOk(); 
               this.setCommondExit();//设置关闭   
               DivWindow.ArrayW.push(document.getElementById(this.popup)); //存储窗口到数组
            };
        this.init();
    };
            //存储窗口到数组
           DivWindow.ArrayW = new Array();
           //字符串连接类
           DivWindow.StringBuild = function(){
        this.arr = new Array();
        this.push = function(str){
           this.arr.push(str);
         };
        this.toString = function(){
         return this.arr.join("");
        };
    };
    //拖动类
     DivWindow.Drag = function(o ,oRoot){
         var _self = this;
       //拖动对象
       this.obj = (typeof oRoot != "undefined") ?oRoot : o;
       this.relLeft = 0; //记录横坐标
       this.relTop = 0; //记录纵坐标
       o.onselectstart = function(){
         return false;
       };
       o.onmousedown = function(e){ //鼠标按下
         e = _self.fixE(e);
       _self.relLeft = e.clientX - _self.fixU(_self.obj.style.left);
       _self.relTop = e.clientY - _self.fixU(_self.obj.style.top);
      document.onmousemove = function(e){
         _self.drag(e);
         };
      document.onmouseup  = function(){
       _self.end();
        };
     };
     this.drag = function(e){ //拖动
      e = this.fixE(e);
      var l = e.clientX - this.relLeft;
      var t = e.clientY - this.relTop;
      if (t < 0)
      {
       t = 0; //防止头部消失
      }
      this.obj.style.left = l +"px";
      this.obj.style.top = t +"px";
     };
     this.end = function(){ //结束拖动
      document.onmousemove = null;
      document.onmouseup = null;
     };
     this.fixE = function(e){ //修复事件
      if (typeof e == "undefined") e = window.event;
      return e;
     };
     this.fixU = function(u){ //处理px单位
      return parseInt(u.split("p")[0]);
     };
    };
    //窗口拖动
    DivWindow.prototype.startDrag = function(){
     var obj = document.getElementById(this.popup);
            var drag = document.getElementById(this.popup_drag);
     new DivWindow.Drag(drag,obj);
    };
    //设定窗口优先级
    DivWindow.prototype.setTop = function(){
     document.getElementById(this.popup).onclick =
     document.getElementById(this.popup).onmousedown =
     function(){
      for(var i=0;i<DivWindow.ArrayW.length;i++)
      {
       DivWindow.ArrayW[i].style.zIndex = 1;
      }
      this.style.zIndex = 100;
     };
    };
    //显示
    DivWindow.prototype.popupShow=function()
    {       
        document.getElementById(‘mask‘).style.display = "block";
        document.getElementById(‘mask‘).style.width=window.screen.width +20;
        document.getElementById(‘mask‘).style.height=window.screen.width +20;
        var element = document.getElementById(this.popup);
        element.style.position = "absolute";
        element.style.visibility = "visible";
        element.style.display = "block";
        element.style.width=this.width;
        element.style.height=‘auto‘;
        element.style.left = (window.screen.width - this.width)/2+"px";
        element.style.top =(window.screen.height-this.height)/2+"px";
        // element.style.top  =20+"px";
        element.style.zIndex=this.zindex;
    }
    
    //设置关闭
    DivWindow.prototype.setCommondExit = function(){
     var _self = this;
     //根对象
     var obj = document.getElementById(this.popup);
     var exit = document.getElementById(this.popup_exit);
     var triggServerEvent=document.getElementById(this.exitButton);
     //设置关闭
      exit.onclick = function(){
            obj.style.display = "none";
            obj.style.visibility = ‘hidden‘;
            document.getElementById(‘mask‘).style.display=‘none‘//关闭遮罩层
            this.result=false;
            triggServerEvent.click();//触发服务器端退出事件
       };
    };
    
    //设置确定
    DivWindow.prototype.setCommondOk = function(){
     var _self = this;
     //根对象
     var obj = document.getElementById(this.popup);
     var ok = document.getElementById(this.popup_ok);
     var triggServerEvent=document.getElementById(this.okButton);
     //设置关闭
      ok.onclick = function(){
            obj.style.display = "none";
            obj.style.visibility = ‘hidden‘;
            document.getElementById(‘mask‘).style.display=‘none‘//关闭遮罩层
            this.result=true;
            triggServerEvent.click();//触发服务器端确定事件
       };
    };
    
    function okClick()
    {
        alert("ok");
    }
    function exitClick()
    {
        alert("exit");
    }
</script>

<input type="button" id="show" onclick="javascript:new DivWindow(‘popup‘,‘popup_drag‘,‘popup_ok‘,‘okButton‘,‘popup_exit‘,‘exitButton‘,‘500‘,‘700‘,4);" value=‘触发‘ />

<!-- 遮罩层 -->
<div id="mask" class="mask"> </div>

<!-- 弹出基本资料详细DIV层 -->
<div class="sample_popup" id="popup" style="visibility: hidden; display: none;">
  <div class="menu_form_header" id="popup_drag">
    <p>温馨提示</p>
  </div>
  <div class="menu_form_body" >
    <p id="popDetail">确定要执行该操作吗？</p>
  </div>
  <div style="background:#fff;text-align:center;height:30px;">
    <input type="button" id="popup_ok" value="[确定]" class="button" />
    <input type="hidden" id="okButton" onClick="okClick()" value="ok"  />
    <input type="button" id="popup_exit" value="[退出]" class="button" />
    <input type="hidden" id="exitButton" onClick="exitClick()" value="exit" />
  </div>
</div>