zoukankan      html  css  js  c++  java
  • 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 };
    } 
    <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;  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;
                     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>
  • 相关阅读:
    mybatis 缓存
    mybatis 动态sql
    新手必读:游戏编程入门指南
    22条常用JavaScript开发小技巧
    Unity即将全面升级 实时3D技术及大场景编辑未来可期!
    10分钟学会Python基础知识
    如何用UE4制作非写实草浪
    最适合设计师的前端学习路径有哪些?
    超全面的C++游戏开发面试问题总结
    如何学习大型项目的源码?虚幻引擎源码学习思路分享
  • 原文地址:https://www.cnblogs.com/ChenRunCheng/p/2890672.html
Copyright © 2011-2022 走看看