对话高考网（3）

弹出式登录界面

本周制作内容为登录页面。在浏览许多网页的登录页面之后决定选择弹出式登录界面进行制作。

• 感谢博友，在csdn上找到了一个简单易懂的demo，略微修改之后在html页面上成功运行，运行效果如下
  

• 但是把demo加入jsp主页面时出现了问题，页面出现错位：
  

• 一开始以为html转换为jsp会出现错误，重新放置
  语句无果。转换成浏览器开发者模式后查看页面发现应该是出现了样式污染，主页面中出现了一个全局样式a，影响到了后续的css样式。对全局样式a进行修改，得到正常效果如下：
  

• 弹窗部分代码为

<a href="#" id = "example">会员入口</a>
<div id="LoginBox">
    <div class="row1">
        会员登录窗口<a href="javascript:void(0)" title="关闭窗口" class="close_btn" id="closeBtn">×</a>
    </div>
    <div class="row">
        用户名: <span class="inputBox">
                <input type="text" id="txtName" placeholder="账号/邮箱" />
            </span><a href="javascript:void(0)" title="提示" class="warning" id="warn">*</a>
    </div>
    <div class="row">
        密&nbsp;&nbsp;&nbsp;&nbsp;码: <span class="inputBox">
                <input type="text" id="txtPwd" placeholder="密码" />
            </span><a href="javascript:void(0)" title="提示" class="warning" id="warn2">*</a>
    </div>
    <div class="row">
        <a href="#" id="loginbtn">登录</a>
    </div>
</div>

<script type="text/javascript">
    $(function ($) {
        //弹出登录
        $("#example").hover(function () {
            $(this).stop().animate({
                opacity: '1'
            }, 600);
        }, function () {
            $(this).stop().animate({
                opacity: '0.6'
            }, 1000);
        }).on('click', function () {
            $("body").append("<div id='mask'></div>");
            $("#mask").addClass("mask").fadeIn("slow");
            $("#LoginBox").fadeIn("slow");
        });
        //
        //按钮的透明度
        $("#loginbtn").hover(function () {
            $(this).stop().animate({
                opacity: '1'
            }, 600);
        }, function () {
            $(this).stop().animate({
                opacity: '0.8'
            }, 1000);
        });
        //文本框不允许为空---按钮触发
        $("#loginbtn").on('click', function () {
            var txtName = $("#txtName").val();
            var txtPwd = $("#txtPwd").val();
            if (txtName == "" || txtName == undefined || txtName == null) {
                if (txtPwd == "" || txtPwd == undefined || txtPwd == null) {
                    $(".warning").css({ display: 'block' });
                }
                else {
                    $("#warn").css({ display: 'block' });
                    $("#warn2").css({ display: 'none' });
                }
            }
            else {
                if (txtPwd == "" || txtPwd == undefined || txtPwd == null) {
                    $("#warn").css({ display: 'none' });
                    $(".warn2").css({ display: 'block' });
                }
                else {
                    $(".warning").css({ display: 'none' });
                }
            }
        });
        //文本框不允许为空---单个文本触发
        $("#txtName").on('blur', function () {
            var txtName = $("#txtName").val();
            if (txtName == "" || txtName == undefined || txtName == null) {
                $("#warn").css({ display: 'block' });
            }
            else {
                $("#warn").css({ display: 'none' });
            }
        });
        $("#txtName").on('focus', function () {
            $("#warn").css({ display: 'none' });
        });
        //
        $("#txtPwd").on('blur', function () {
            var txtName = $("#txtPwd").val();
            if (txtName == "" || txtName == undefined || txtName == null) {
                $("#warn2").css({ display: 'block' });
            }
            else {
                $("#warn2").css({ display: 'none' });
            }
        });
        $("#txtPwd").on('focus', function () {
            $("#warn2").css({ display: 'none' });
        });
        //关闭
        $(".close_btn").hover(function () { $(this).css({ color: 'black' }) }, function () { $(this).css({ color: '#999' }) }).on('click', function () {
            $("#LoginBox").fadeOut("fast");
            $("#mask").css({ display: 'none' });
        });
    });

• css为

 .mask{margin:0;
      padding:0;
      border:none;
      width:100%;
      height:100%;
      background:#333;
      opacity:0.6;
      filter:alpha(opacity=60);
      z-index:9999;
      position:fixed;
      top:0;
      left:0;
      display:none;}
#LoginBox{position:absolute;
    left:460px;
    top:150px;
    background:white;
    width:426px;
    height:282px;
    border:3px solid #444;
    border-radius:7px;
    z-index:10000;
    display:none;}
.row1{background:#f7f7f7;
    padding:0px 20px;
    line-height:50px;
    height:50px;
    font-weight:bold;
    color:#666;
    font-size:20px;}
.row{height:77px;
    line-height:77px;
    padding:0px 30px;
    font-family:华文楷体;
    font-size:x-large;}
.close_btn{font-family:arial;
    font-size:30px;
    font-weight:700;
    color:#999;
    text-decoration:none;
    float:right;padding-right:4px;}
.inputBox{border:1px solid #c3c3c3;
    padding:1px 3px 6px 3px;
    border-radius:5px;
    margin-left:5px;}
#txtName{height:27px;
    width:230px;
    border:none;}
#txtPwd{height:27px;
    width:230px;
    border:none;}
#loginbtn{color:White;
    background:#4490f7;
    text-decoration:none;
    padding:10px 95px;
    margin-left:87px;
    margin-top:40px;
    border-radius:5px;
    opacity:0.8;filter:alpha(opacity=80);}
.warning{float:right;
    color:Red;
    text-decoration:none;
    font-size:20px;font-weight:bold;margin-right:20px;
    display:none;}

源代码只是略作修改，详细demo请见
http://www.zhangxinxu.com/study/200911/jQuery-plugin-boxy.html

PS:
浏览器开发者模式确实对于修改网页bug有莫大帮助，在开发者模式下即时点击元素会即使修改页面，十分方便。

主页面各元素基本做到这里，接下来就开始制作各分页面，学习范围还是百度及博客，着手制作新闻以及最重要的论坛页面。