如图所示:
单击页面上注册时弹出的用户注册模态窗口:
模态窗口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> </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;
}
{
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> </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 >
< 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 >