jQuery鼠标点击弹出登录框代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery鼠标点击弹出登录框代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery鼠标点击弹出登录框代码</title>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/login.js"></script>
<link rel="stylesheet" type="text/css"  href="css/style.css"/>
</head>
<body>
<br><br><br><br><br><br><br>
<div class="login-header"><a href="javascript:void(0);">点击，弹出登录框</a></div>
<div class="login">
    <div class="login-title">登录会员<span><a href="javascript:void(0);" class="close-login">关闭</a></span></div>
    <div class="login-input-content">
        <div class="login-input">
            <label>用&nbsp;户&nbsp;&nbsp;名：</label>
            <input type="text" placeholder="请输入用户名"  name="info[username]" id="username" class="list-input"/>
        </div>
        <div class="login-input">
            <label>登录密码：</label>
            <input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input"/>
        </div>
    </div>
    <div class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div>
</div>
<div class="login-bg"></div>
</body>
</html>

JS代码(login.js):

$(function (){
	H_login ={
}
;
	H_login.openLogin = function(){
	$('.login-header a').click(function(){
	$('.login').show();
	$('.login-bg').show();
}
);
}
;
	H_login.closeLogin = function(){
	$('.close-login').click(function(){
	$('.login').hide();
	$('.login-bg').hide();
}
);
}
;
	H_login.loginForm = function (){
	$("#login-button-submit").on('click',function(){
	var username = $("#username");
	var usernameValue = $("#username").val();
	var password = $("#password");
	var passwordValue = $("#password").val();
	if(usernameValue == ""){
	alert("鐢ㄦ埛鍚嶄笉鑳戒负绌?);
	username.focus();
	return false;
}
else if(usernameValue.length > 15){
	alert("鐢ㄦ埛鍚嶉暱搴︿笉鑳藉ぇ浜?5瀛楃");
	username.focus();
	return false;
}
else if(passwordValue == ""){
	alert("瀵嗙爜涓嶈兘涓虹┖");
	password.focus();
	return false;
}
else if(passwordValue.length < 6 || passwordValue.length > 30){
	alert("瀵嗙爜闀垮害涓嶈兘灏忎簬6鎴栧ぇ浜?0浣嶅瓧绗?);
	password.focus();
	return false;
}
else{
	alert("鐧诲綍鎴愬姛");
	setTimeout(function(){
	$('.login').hide();
	$('.login-bg').hide();
	$('.list-input').val('');
}
,2000);
}
}
);
}
;
	H_login.run = function (){
	this.closeLogin();
	this.openLogin();
	this.loginForm();
}
;
	H_login.run();
}
);

CSS代码(style.css):

@charset "utf-8";/* CSS Document */
*{padding:0px;margin:0px auto;}
body{padding:0px;margin:0px auto;font-size:12px;font-family:"寰蒋闆呴粦";}
ul,li,ol,dl,dt,dd,div,p,span,h1,h2,h3,h4,h5,h6,a{padding:0px;margin:0px;}
ul,li,ol{list-style:none;}
a{text-decoration:none;color:#000000;}
/* login */
.login-header{width:100%;text-align:center;height:30px;font-size:24px;line-height:30px;}
.login{width:500px;position:fixed;border:#ebebeb solid 1px;height:280px;top:50%;left:50%;display:none;background:#ffffff;box-shadow:0px 0px 20px #ddd;z-index:9999;margin-left:-250px;margin-top:-140px;}
.login-title{width:100%;margin:10px 0px 0px 0px;text-align:center;line-height:40px;height:40px;font-size:18px;position:relative;}
.login-title span{position:absolute;font-size:12px;right:-20px;top:-30px;background:#ffffff;border:#ebebeb solid 1px;width:40px;height:40px;border-radius:20px;}
.login-title span a{display:block;}
.login-input-content{margin-top:20px;}
.login-input{overflow:hidden;margin:0px 0px 20px 0px;}
.login-input label{float:left;width:90px;padding-right:10px;text-align:right;line-height:35px;height:35px;font-size:14px;}
.login-input input.list-input{float:left;line-height:35px;height:35px;width:350px;border:#ebebeb 1px solid;text-indent:5px;}
.login-button{width:50%;margin:30px auto 0px auto;line-height:40px;font-size:14px;border:#ebebeb 1px solid;text-align:center;}
.login-button a{display:block;}
.login-bg{width:100%;height:100%;position:fixed;top:0px;left:0px;background:#ebebeb;filter:alpha(opacity=30);-moz-opacity:0.3;-khtml-opacity:0.3;opacity:0.3;display:none;}

附件:下载该文件资源,减少时间成本(增值服务)