转自：http://www.cnblogs.com/tenghoo/archive/2007/06/25/795165.html
如图所示：
单击页面上注册时弹出的用户注册模态窗口：
模态窗口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;
}
页面调用
<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>
如图所示：
单击页面上注册时弹出的用户注册模态窗口：
模态窗口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; }页面调用
<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>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 地球OL攻略 —— 某应届生求职总结
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· .NET周刊【3月第1期 2025-03-02】
· [AI/GPT/综述] AI Agent的设计模式综述