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>

                        &nbsp; &nbsp;

                        <asp:Button ID="BttLogin" runat="server" Text=" 登 陆 " />&nbsp;

                        <input id="BttCancel" type="button" value=" 取 消 " onclick="ShowNo()" />

                    </div>

                </div>

            </div>

            <br />

        </div>

 

你可能感兴趣的:(asp.net)