[原创]简单好用的JS 对话框

 1 var _hy = _hy || {};
 2 _hy.Dialog = function (id,contentdiv) 
 3 {
 4     this.Id;
 5     this.MaskDiv;
 6     this.MaskOpacity = 0.7;
 7     this.MaskBg = "#000000";
 8     this.IsShowMask = true;
 9     this.Content = contentdiv;
     this.Width;
     this.Height;
     this.pagesize;
 }
 _hy.Dialog.prototype.OnInit = function () 
 {
     this.pagesize = _hy.GetPageSize();
     if(this.IsShowMask)
     {
         this.MaskDiv = _hy.GetId(this.Id+"Mask");
         if(this.MaskDiv = undefined  || this.MaskDiv == null)
         {
                  var html = "<div id='"+this.Id+"Mask"+"' style='position: absolute; width: 100%; z-index: 2;top: 0px; left: 0px; background-color: "+this.MaskBg+"; filter: Alpha(opacity="+(this.MaskOpacity*100)+"); -moz-opacity: "+this.MaskOpacity+";opacity: "+this.MaskOpacity+"; display:none'></div>";
            document.writeln(html);
            this.MaskDiv =_hy.GetId(this.Id+"Mask");
        
            this.MaskDiv.style.height = (this.pagesize[1]+170)+"px";
            this.MaskDiv.style.width = this.pagesize[0]+"px";
           
         }
     }
     
     if (this.Content.style.width != "") 
         this.Width = parseInt(this.Content.style.width);
     else
         this.Width =500;
     if (this.Content.style.height != "")
         this.Height = parseInt(this.Content.style.height);
     else
       this.Content.style.top = "100px";
     
     if(this.Width != undefined)
         this.Content.style.width = this.Width+"px";
     if(this.Height != undefined)
         this.Content.style.height = this.Height+"px";
   
     this.Content.style.zIndex=3;
     this.Content.style.position = "absolute";
     this.Content.style.display = "none";
  
     if(this.Content.style.left == "")
         this.Content.style.left = (this.pagesize[2]-this.Width)/2 +"px";
     
     if(this.Content.style.top == "")
         this.Content.style.top = (this.pagesize[3]-this.Height)/2+"px";
     
 }
 
 _hy.Dialog.prototype.Toggle = function () 
 {
     if(this.Content.style.display == "none")
     {
         this.Content.style.display = "";
         if(this.MaskDiv != undefined)
         {
             this.MaskDiv.style.display = "";
         }
     }
     else
     {
         this.Content.style.display = "none";
         if(this.MaskDiv != undefined)
         {
             this.MaskDiv.style.display = "none";
         }
     }
 }

 

   使用方法

   var dialog = new _hy.Dialog("dialog",_hy.GetId("dialogPanel"));
   dialog.MaskOpacity = 0.6;
   dialog.OnInit();
   
   function SelectCategory_Click()
   {
        dialog.Toggle();
   }
  
   function SelectCategory_Close()
   {
        dialog.Toggle();
   }