仿照腾讯新闻网制作，点击登录弹出登录框

首先就是需要你设计自己的主页，这不是我们今天要说的重点，为了好看，也为了让大家更好理解，我就用我之前做的一个小案例来讲一下：

1.如下图是我做的一个新闻网站的主页

2.大家看到，右上方有个登录按钮，当点击时会出现下图效果：

3.下面就来给大家说一下如何实现

这里主要是用JS技术实现的，当然登录的页面是现在层里面的，只不过一开始层的display属性是none。

JS代码如下：

<script type="text/javascript" language="javascript">
        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 };
        }
    </script>

登录层的代码如下：

<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:522px; height:268px; 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:center;vertical-align:middle;" >
                <div style=" margin-bottom:20px; color:Gray; font-weight:bold;">
                账户登录
                </div>
                <div>
                    用户：
                  <asp:TextBox ID="txtUserName" runat="server" > </asp:TextBox>
                </div>
                <div style=" margin-top:10px;">
                    密码：
                  <asp:TextBox ID="txtUserPwd" runat="server" TextMode="Password" > </asp:TextBox>
                </div>
                <br/>
                <div>     
                    <asp:Button ID="BttLogin" runat="server" Text=" 登 录 " 
                        οnclick="BttLogin_Click1"/> 
                    <input id="BttCancel" type="button" value=" 取 消 " οnclick="ShowNo()" />
                </div>
            </div>
      </div> 

主页中右上角的登录按钮，其实是一个超链接的方式，代码如下：

<a href="javascript:void(0)" οnclick="showFloat()">登录</a>

好了，做完这些工作之后，你的登录页面也就可以通过点击按钮来弹出了，让你的前台设计瞬间高大上了一点，当然我弹出的这个页面没有过多是我处理，没有那么好看。要美观的话就看你的自由发挥喽！！

还是那句话，我只不过是个菜鸟，也正在学习，只是把学习中遇到的一些好的案例或者解决问题的方法同大家分享一下，希望对大家有所帮助！小弟献丑，大神勿喷啊！

还是希望同我一样在学习这些的你多多与我交流，很愿意结实有志向的朋友！如果有大神愿意带带我，那更是感激不尽！！！

还有，我上传了一下我在讲解这个案例的时候用到的新闻网站，虽然功能只实现了一部分，但是答题框架已经给出来了，有需要的童鞋可以下载使用，传送门：新闻发布系统下载