实现登录弹出窗口

来源：互联网发布：电脑软件分类编辑：程序博客网时间：2024/04/30 00:30
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <base href="<%=basePath%>">    <title>用jequery登录弹窗</title>    <meta http-equiv="pragma" content="no-cache">    <meta http-equiv="cache-control" content="no-cache">    <meta http-equiv="expires" content="0">        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="This is my page">    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>    <!-- 导入jquery函数库 -->    <style type="text/css">    .warning{float:right;text-decoration:none;font-weight:bold;display:none;}         .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:400px;top:140px;background:white;width:480px;height:370px;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:220px;border:none;}    #txtPwd{height:27px;width:220px;border:none;}    .bottom{rigth:0px;bottom:10px;color:green;text-decoration:none;font-size:20px;}    .bottoms{padding:18px 190px;}    #loginbtn{color:White;background:#4490f7;text-decoration:none;padding:10px 95px;margin-left:87px;margin-top:20px;border-radius:5px;opacity:0.8;filter:alpha(opacity=80);        </style>  </head>  <body>      <script type="text/javascript">        $(function ($) {            //弹出登录            $("#example").on('click', function () {                $("body").append("<div id='mask'></div>");                /* 在body里面添加一个div 作为背景 */                $("#mask").addClass("mask").fadeIn("slow");                /* div="mas"逐渐显示 */                $("#LoginBox").fadeIn("slow");                /* div的id为"liginbox"逐渐显示 */            });            //文本框不允许为空---按钮触发            $("#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' });                        /* 显示warning块 */                    }                    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' });                    }                }            });            //文本框不允许为空---单个文本触发            /* 当鼠标不在<input>框时，触发blur事件，如果输入框为空则显示数据块 */            $("#txtName").on('blur', function () {                var txtName = $("#txtName").val();                if (txtName == "" || txtName == undefined || txtName == null) {                    $("#warn").css({ display: 'block' });                    /* 分块 */                }                else {                    $("#warn").css({ display: 'none' });                    /* 此元素不会被显示 */                }            });            /* 当鼠标进入<input>框时触发foucus事件，数据块不显示 */            $("#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"这个按钮上时，颜色变为黑色，单击时调用click方法，登录窗口淡出，"#mask"块不再显示 */            $(".close_btn").hover(function () {                 $(this).css({ color: 'black' }) },                 function () { $(this).css({ color: '#999' }) }).on('click', function () {                $("#LoginBox").fadeOut("fast");                $("#mask").css({ display: 'none' });            });        });        </script>    <a href="javascript:void(0)" id="example">登录</a>    <div id="LoginBox">        <div class="row1">              登录入口<a href="javascript:void(0)" title="关闭窗口" class="close_btn" id="closeBtn">×</a>        </div>        <form action="" method="post">            <div class="row">               用户名:               <span class="inputBox">                 <input type="text" id="txtName"  style="border-radius:20px" placeholder="账号/邮箱" />              </span>              <font color="red" class="warning" id="warn" size="1px">用户名不能为空</font>            </div>            <div class="row">                 密&nbsp;&nbsp;&nbsp;&nbsp;码:                <span class="inputBox">                  <input type="text" style="border-radius:20px" id="txtPwd" placeholder="密码" />               </span>               <font color="red" size="1px" class="warning" id="warn2">密码不能为空</font>            </div>            <div class="row">                <input type="submit" value="登录" id="loginbtn"/>            </div>        </form>        <div class="bottoms">            <a href="" class="bottom">注册新用户</a>        </div>    </div>  </body></html>
0 0