Asp.net弹出层并且有遮罩层

最新推荐文章于 2017-04-23 16:53:13 发布

原创最新推荐文章于 2017-04-23 16:53:13 发布 · 3.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#asp.net #textbox #javascript #function #server #div

本文介绍了一种使用HTML、CSS及JavaScript实现的动态登录框效果。通过添加半透明遮罩层和绝对定位的登录框，可以使得登录界面在页面中央优雅地展现，并通过JavaScript动态调整位置和尺寸。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文件</title> <mce:script type="text/javascript" language="javascript"></mce:script> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> body{margin:0px;} </style> </head> <body> <form id="form1" runat="server"> <a href="javascript:void(0)" mce_href="javascript:void(0)" onclick="showFloat()">登錄</a> //登錄鏈接  <div id="doing" style="filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;background-color:#000;width:100%;height:100%;z-index:1000;position: absolute;left:0;top:0;display:none;overflow: hidden;"> </div>  <div id="divLogin" style="border:solid 10px #898989;background:#fff;padding:10px;width:780px;z-index:1001; position: absolute; display:none;top:50%; left:50%;margin:-200px 0 0 -400px;"> <div style="padding:3px 15px 3px 15px;text-align:left;vertical-align:middle;" mce_style="padding:3px 15px 3px 15px;text-align:left;vertical-align:middle;" > <div> 用户： <asp:TextBox ID="TxtUserName" runat="server" > </asp:TextBox> </div> <div> 密码： <asp:TextBox ID="TxtUserPwd" runat="server" TextMode="Password" > </asp:TextBox> </div> <br/> <div> <asp:Button ID="BttLogin" runat="server" Text=" 登陆 "/> <input id="BttCancel" type="button" value=" 取消 " onclick="ShowNo()" /> </div> </div> </div> </form> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> //<br/>用来撑大页面 </body> </html>