Javascript模态窗口实现

如图所示：
单击页面上注册时弹出的用户注册模态窗口：

模态窗口js源码：

       function  ModalDialog(name,divid,width,height,leftop,topop,color)
         {
            this.name=name;//名称
            this.div=divid;//要放入窗体中的元素名称
            this.width=width;//窗体高
            this.height=height;//窗体宽
            this.leftop=leftop;//左侧位置
            this.topop=topop;//上部位置
            this.color=color;//整体颜色
            this.show=function()//显示窗体
            {
                document.all(obj.name+"_divshow").style.width=obj.width;
                document.all(obj.name+"_divshow").style.height=obj.height;
                document.all(obj.name+"_divshow").style.left=obj.leftop;
                document.all(obj.name+"_divshow").style.top=obj.topop;
                document.all(obj.name+"_mask").style.width=document.body.clientWidth;
                document.all(obj.name+"_mask").style.height=document.body.clientHeight;
                document.all(obj.name+"_divshow").style.visibility="visible";
                document.all(obj.name+"_mask").style.visibility="visible";
            }
            
            this.close=function()//关闭窗体
            {  
                document.all(obj.name+"_divshow").style.width=0;
                document.all(obj.name+"_divshow").style.height=0;
                document.all(obj.name+"_divshow").style.left=0;
                document.all(obj.name+"_divshow").style.top=0;
                document.all(obj.name+"_mask").style.width=0;
                document.all(obj.name+"_mask").style.height=0;
                document.all(obj.name+"_divshow").style.visibility="hidden";
                document.all(obj.name+"_mask").style.visibility="hidden";         
            }
            
            this.toString=function()
            {
                var tmp="<div id='"+this.name+"_divshow' style='position:absolute; left:0; top:0;z-index:10; visibility:hidden;width:0;height:0'>";
                tmp+="<table cellpadding=0 cellspacing=0 border=0 width=100% height=100%>";
                tmp+="<tr height=28>";
                tmp+="<td bgcolor='"+obj.color+"' align=right colspan=3>";
                tmp+="</td>";
                tmp+="</tr>";
                tmp+="<tr>";
                tmp+="<td bgcolor='"+obj.color+"' width=2></td>";
                tmp+="<td bgcolor=#ffffff id='"+this.name+"_content' valign=top>&nbsp;</td>";
                tmp+="<td bgcolor='"+obj.color+"'width=2></td>";
                tmp+="</tr>";
                tmp+="<tr height=2><td  bgcolor='"+obj.color+"' colspan=3></td></tr>"
                tmp+="</table>";
                tmp+="</div>";
                tmp+="<div  id='"+this.name+"_mask' style='position:absolute; top:0; left:0; width:0; height:0; background:#666; filter:ALPHA(opacity=60); z-index:9; visibility:hidden'></div>";
            
                document.write(tmp);
                document.all(this.name+"_content").insertBefore(document.all(this.div));
            }
             var obj=this;
        }

页面调用

< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head  id ="Head1"  runat ="server" >
     < title > 登录 </ title >
     < script  src ="js/ModalDialog2.js"  type ="text/jscript" ></ script >
     < script  language ="JavaScript" >  
        var md=new ModalDialog2("md","frm_reg",300,200,100,100,"#ff0000");
 
         //显示注册窗口
         function uRegShow()
         {
          md.show();
          return false;
         }
         //关闭注册窗口
         function uRegdisplay()
         {
             md.close();
             return false;
         }
     </ script >
</ head >
< body  >
    < form  id ="Form1"  name ="form1"  runat =server >
         < a  href =''  onclick ="javascript:return uRegShow();" > 注册 </ a >
         < div  style ="display: none;" >
             < table  id =frm_reg  width =200  height =200 >
                 < tr >
                     < td  colspan =2 > 用户注册 </ td >
                 </ tr >
                 < tr >
                     < td > name </ td >
                     < td >< asp:TextBox  ID ="TextBox1"  runat ="server" ></ asp:TextBox ></ td >
                 </ tr >
                  < tr >
                     < td > pass </ td >
                     < td >< asp:TextBox  ID ="TextBox2"  runat ="server" ></ asp:TextBox ></ td >
                 </ tr >
                 < tr >
                     < td >
                      < button  >  确定 </ button >
                     </ td >
                     < td >
                      < button  onclick ="uRegdisplay();" >  关闭  </ button >
                     </ td >
                 </ tr >
             </ table >
         </ div >
     </ form >
     < script  language ="javascript"  type ="text/javascript" >
            md.toString();    
     </ script >
</ body >
</ html >

转载于:https://www.cnblogs.com/tenghoo/archive/2007/06/25/795165.html