<div class="login"> <a href="" class="a1">登錄</a><a href="" class="a2">注冊</a> </div><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;碼: <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">? ? ? ? ? ? <input type="submit" id="loginbtn" value="登錄">? ? ? ? </div>? ? </div><script type="text/javascript"> $(function ($) { //彈出登錄 $("#a1").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' }); }); }); </script> ? ? ? ?