Javascript模态窗口实现

本文介绍了一种使用JavaScript创建用户注册模态窗口的方法。通过定义ModalDialog对象,可以自定义模态窗口的位置、大小及颜色等属性,并实现窗口的显示与关闭功能。示例中展示了如何将该模态窗口应用到具体的用户注册场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


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

模态窗口js源码:
None.gif      function ModalDialog(name,divid,width,height,leftop,topop,color)
ExpandedBlockStart.gifContractedBlock.gif        
dot.gif{
InBlock.gif            
this.name=name;//名称
InBlock.gif
            this.div=divid;//要放入窗体中的元素名称
InBlock.gif
            this.width=width;//窗体高
InBlock.gif
            this.height=height;//窗体宽
InBlock.gif
            this.leftop=leftop;//左侧位置
InBlock.gif
            this.topop=topop;//上部位置
InBlock.gif
            this.color=color;//整体颜色
InBlock.gif
            this.show=function()//显示窗体
ExpandedSubBlockStart.gifContractedSubBlock.gif
            dot.gif{
InBlock.gif                document.all(obj.name
+"_divshow").style.width=obj.width;
InBlock.gif                document.all(obj.name
+"_divshow").style.height=obj.height;
InBlock.gif                document.all(obj.name
+"_divshow").style.left=obj.leftop;
InBlock.gif                document.all(obj.name
+"_divshow").style.top=obj.topop;
InBlock.gif                document.all(obj.name
+"_mask").style.width=document.body.clientWidth;
InBlock.gif                document.all(obj.name
+"_mask").style.height=document.body.clientHeight;
InBlock.gif                document.all(obj.name
+"_divshow").style.visibility="visible";
InBlock.gif                document.all(obj.name
+"_mask").style.visibility="visible";
ExpandedSubBlockEnd.gif            }

InBlock.gif            
InBlock.gif            
this.close=function()//关闭窗体
ExpandedSubBlockStart.gifContractedSubBlock.gif
            dot.gif{  
InBlock.gif                document.all(obj.name
+"_divshow").style.width=0;
InBlock.gif                document.all(obj.name
+"_divshow").style.height=0;
InBlock.gif                document.all(obj.name
+"_divshow").style.left=0;
InBlock.gif                document.all(obj.name
+"_divshow").style.top=0;
InBlock.gif                document.all(obj.name
+"_mask").style.width=0;
InBlock.gif                document.all(obj.name
+"_mask").style.height=0;
InBlock.gif                document.all(obj.name
+"_divshow").style.visibility="hidden";
InBlock.gif                document.all(obj.name
+"_mask").style.visibility="hidden";         
ExpandedSubBlockEnd.gif            }

InBlock.gif            
InBlock.gif            
this.toString=function()
ExpandedSubBlockStart.gifContractedSubBlock.gif            
dot.gif{
InBlock.gif                
var tmp="<div id='"+this.name+"_divshow' style='position:absolute; left:0; top:0;z-index:10; visibility:hidden;width:0;height:0'>";
InBlock.gif                tmp
+="<table cellpadding=0 cellspacing=0 border=0 width=100% height=100%>";
InBlock.gif                tmp
+="<tr height=28>";
InBlock.gif                tmp
+="<td bgcolor='"+obj.color+"' align=right colspan=3>";
InBlock.gif                tmp
+="</td>";
InBlock.gif                tmp
+="</tr>";
InBlock.gif                tmp
+="<tr>";
InBlock.gif                tmp
+="<td bgcolor='"+obj.color+"' width=2></td>";
InBlock.gif                tmp
+="<td bgcolor=#ffffff id='"+this.name+"_content' valign=top>&nbsp;</td>";
InBlock.gif                tmp
+="<td bgcolor='"+obj.color+"'width=2></td>";
InBlock.gif                tmp
+="</tr>";
InBlock.gif                tmp
+="<tr height=2><td  bgcolor='"+obj.color+"' colspan=3></td></tr>"
InBlock.gif                tmp
+="</table>";
InBlock.gif                tmp
+="</div>";
InBlock.gif                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>";
InBlock.gif            
InBlock.gif                document.write(tmp);
InBlock.gif                document.all(
this.name+"_content").insertBefore(document.all(this.div));
ExpandedSubBlockEnd.gif            }

InBlock.gif             
var obj=this;
ExpandedBlockEnd.gif        }

None.gif

页面调用
None.gif<html xmlns="http://www.w3.org/1999/xhtml">
None.gif
<head id="Head1" runat="server">
None.gif    
<title>登录</title>
None.gif    
<script src="js/ModalDialog2.js" type="text/jscript"></script>
ExpandedBlockStart.gifContractedBlock.gif    
<script language="JavaScript">dot.gif 
InBlock.gif        
var md=new ModalDialog2("md","frm_reg",300,200,100,100,"#ff0000");
InBlock.gif 
InBlock.gif         
//显示注册窗口
InBlock.gif
         function uRegShow()
ExpandedSubBlockStart.gifContractedSubBlock.gif         
dot.gif{
InBlock.gif          md.show();
InBlock.gif          
return false;
ExpandedSubBlockEnd.gif         }

InBlock.gif         
//关闭注册窗口
InBlock.gif
         function uRegdisplay()
ExpandedSubBlockStart.gifContractedSubBlock.gif         
dot.gif{
InBlock.gif             md.close();
InBlock.gif             
return false;
ExpandedSubBlockEnd.gif         }

ExpandedBlockEnd.gif    
</script>
None.gif
</head>
None.gif
<body >
None.gif   
<form id="Form1" name="form1" runat=server>
None.gif        
<href='' onclick="javascript:return uRegShow();">注册</a>
None.gif        
<div style="display: none;">
None.gif            
<table id=frm_reg width=200 height=200>
None.gif                
<tr>
None.gif                    
<td colspan=2>用户注册</td>
None.gif                
</tr>
None.gif                
<tr>
None.gif                    
<td>name</td>
None.gif                    
<td><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>
None.gif                
</tr>
None.gif                 
<tr>
None.gif                    
<td>pass</td>
None.gif                    
<td><asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></td>
None.gif                
</tr>
None.gif                
<tr>
None.gif                    
<td>
None.gif                     
<button > 确定</button>
None.gif                    
</td>
None.gif                    
<td>
None.gif                     
<button onclick="uRegdisplay();"> 关闭 </button>
None.gif                    
</td>
None.gif                
</tr>
None.gif            
</table>
None.gif        
</div>
None.gif    
</form>
ExpandedBlockStart.gifContractedBlock.gif    
<script language="javascript" type="text/javascript">dot.gif
InBlock.gif            md.toString();    
ExpandedBlockEnd.gif    
</script>
None.gif
</body>
None.gif
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值