Javascript模态窗口实现

最新推荐文章于 2024-09-21 11:16:01 发布

转载最新推荐文章于 2024-09-21 11:16:01 发布 · 158 阅读

·

0

·

文章标签：

#javascript #xhtml #ViewUI

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

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

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

模态窗口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>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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