asp.net给页面增加一个层
在做登录的时候想着别老是用跳转页面,用户体验超差的,而且对于网速慢的用访来说,还要去跳转一次重新加载一个新的页面,显得有点不爽!就弄了一个层直接在当前页面跳转!
废话不说直接上代码!
function ShowNo() //隐藏两个层 { document.getElementById("doing").style.display = "none"; document.getElementById("divLogin").style.display = "none"; } function $(id) { return (document.getElementById) ? document.getElementById(id) : document.all[id]; } function showFloat() //根据屏幕的大小显示两个层 { var range = getRange(); $('doing').style.width = range.width + "px"; $('doing').style.height = range.height + "px"; $('doing').style.display = "block"; document.getElementById("divLogin").style.display = ""; } function getRange() //得到屏幕的大小 { var top = document.body.scrollTop; var left = document.body.scrollLeft; var height = document.body.clientHeight; var width = document.body.clientWidth; if (top == 0 && left == 0 && height == 0 && width == 0) { top = document.documentElement.scrollTop; left = document.documentElement.scrollLeft; height = document.documentElement.clientHeight; width = document.documentElement.clientWidth; } return { top: top, left: left, height: height, width: width }; } <a 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: 700; 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: 701; 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;"> <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> <br /> </div>
【推荐】还在用 ECharts 开发大屏?试试这款永久免费的开源 BI 工具!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步