jQuery登录无刷新弹窗提醒特效代码

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

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

以下是 jQuery登录无刷新弹窗提醒特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML>
<html>
<head>
	<title>jQuery登录无刷新弹窗提醒</title>
	<meta charset="UTF-8">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.form.js"></script>
    <script type="text/javascript" src="js/tooltips.js"></script>
    <script type="text/javascript">
		//支持Enter键登录
		document.onkeydown = function(e){
			if(!e) e = window.event;
			if((e.keyCode || e.which) == 13){
				var obtnLogin=document.getElementById("submit_btn")
				obtnLogin.focus();
			}
		}

    	$(function(){
			//提交表单
			$('#submit_btn').click(function(){
				show_loading();
				var myReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; //邮件正则
				if($('.email').val() == ''){
					show_err_msg('邮箱还没填呢！');	
					$('.email').focus();
				}else if(!myReg.test($('.email').val())){
					show_err_msg('您的邮箱格式错咯！');
					$('.email').focus();
				}else if($('.password').val() == ''){
					show_err_msg('密码还没填呢！');
					$('.password').focus();
				}else{
					//ajax提交表单，#login_form为表单的ID。 如：$('#login_form').ajaxSubmit(function(data) { ... });
					show_msg('登录成功咯！  正在为您跳转...','/');	
				}
			});
		});
    </script>
    <style type="text/css">
		* html,* html body{background-image:url(about:blank);background-attachment:fixed;}
		html{color:#000;background-color:#F2F2F2;}
		body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
		table {border-collapse:collapse;border-spacing:0;}
		img,button,input {vertical-align:middle;border:none;}
		label{font-size:12px;color:#666;cursor:pointer;}
		a,span{color:#666;font-size:12px;text-decoration:none;}
		a:hover{text-decoration:underline;}
		address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
		ol,ul,li{list-style:none;list-style-type: none;}
		h1,h2,h3,h4,h5,h6{font-size:100%;overflow:hidden;}
		
    	header {width:660px;margin:0 auto;font-size:28px;font-weight:bold;margin-top:20px;color:#ccc;text-shadow:1px 1px 1px #fff;font-family: 'revolt',georgia,'Microsoft yahei';}
		.content {width:350px;margin:90px auto auto;padding:30px 40px;border:2px solid #ccc;border-radius:10px;box-shadow:0 0 30px #ccc;}
		.ipt {border:1px solid #ddd;padding:10px 5px;width: 240px;outline:none;border-radius:3px;background-color:#fff;font-family: 'revolt',georgia,'Microsoft yahei';}
		.ipt:focus {background-color:#fefefe;box-shadow:0 0 3px #aaa;}
		.thead {font-weight:bold;font-size:20px;padding-bottom:20px!important;text-shadow:1px 1px 1px #fff;}
		.content th {color:#666;font-size:12px;font-weight:bold;text-shadow: 1px 1px 1px #fff;}
		.content td {padding:5px 0;}
		#submit_btn {background-color:#4797ED;border:none;border-radius:10px;box-shadow:0 0 3px #aaa;width:98px;height:41px;line-height:41px;color:#fff;font-size:18px;font-weight:bold;cursor:pointer;margin-right:20px;display:block;outline:none;text-shadow:0 1px 1px #777;float:left;}
		#submit_btn:hover {background-color:#d8d8d8;color:#666;text-shadow:1px 1px 1px #fff;}
		.line {float:left;margin-top:10px;}
		.pd15 {padding-top:15px!important;}
		.red {color:red;}
		.tooltip {cursor:help;position:relative;text-shadow:2px 2px 2px #999;}
		.tooltip span {font: normal 14px verdana;color: #fff;visibility: hidden;position: absolute;bottom: 30px;left: 50%;z-index: 20000;width: 250px;margin-left: -127px;padding: 10px;border: 2px solid #422A20;background: -moz-linear-gradient(top, #B4784C 0%, #422A20 100%);
background: -webkit-gradient(linear, center top, center bottom, from(#B4784C), to(#422A20));background: -o-gradient(top, #B4784C, #422A20); border-bottom: solid 1px #422A20;-moz-border-radius: 4px;border-radius: 4px;-moz-box-shadow: 0 0 5px 5px #B1A59D;-webkit-box-shadow: 0 0 5px 5px #B1A59D;box-shadow: 0 0 5px 5px #B1A59D;}
		.tooltip:hover span {visibility: visible;} 
    </style>
</head>
<body>
	 
 	<div class="content">
    	<form action="login.html" method="post" id="login_form">
    	<table width="100%">
        	<thead>
            	<td colspan="2" class="thead">后台管理员登录</td>
            </thead>
            <tbody>
                <tr>
                  <th><em class="red">*</em> 邮箱：</th>
                  <td><input type="text" value="" name="" class="email ipt"> <span class="tooltip">(说明) <span>*表示必填哦,格式如：demo@198zone.com</span></span></td>
                </tr>
                <tr>
                  <th><em class="red">*</em> 密码：</th>
                  <td><input type="password" value="" name="" class="password ipt"></td>
                </tr>
                <tr>
                  <th class="pd15"></th>
                  <td class="pd15">
                  	<button id="submit_btn" type="button">登录</button>
                    <p class="line"><input type="checkbox" id="remember" value=""> <label for="remember">记住我</label></p>
                  </td>
                </tr>
            </tbody>
        </table>
        </form>
    </div>
</body>
</html>

JS代码(tooltips.js):

var msgdsq;
	//错误时：提示调用方法function show_err_msg(msg){
	$('.msg_bg').html('');
	clearTimeout(msgdsq);
	$('body').append('<div class="sub_err" style="position:absolute;
	top:60px;
	left:0;
	width:500px;
	z-index:999999;
	"></div>');
	var errhtml='<div style="padding:8px 0px;
	border:1px solid #ff0000;
	width:100%;
	margin:0 auto;
	background-color:#fff;
	color:#B90802;
	border:3px #ff0000 solid;
	text-align:center;
	font-size:16px;
	font-family:微软雅黑;
	"><img style="margin-right:10px;
	" src="images/error.png">';
	var errhtmlfoot='</div>';
	$('.msg_bg').height($(document).height());
	$('.sub_err').html(errhtml+msg+errhtmlfoot);
	var left=($(document).width()-500)/2;
	$('.sub_err').css({
	'left':left+'px'}
);
	var scroll_height=$(document).scrollTop();
	$('.sub_err').animate({
	'top':scroll_height+120}
,300);
	msgdsq=setTimeout(function(){
	$('.sub_err').animate({
	'top':scroll_height+80}
,300);
	setTimeout(function(){
	$('.msg_bg').remove();
	$('.sub_err').remove();
}
,300);
}
,"1000");
}
//正确时：提示调用方法function show_msg(msg,url){
	$('.msg_bg').html('');
	clearTimeout(msgdsq);
	$('body').append('<div class="sub_err" style="position:absolute;
	top:60px;
	left:0;
	width:500px;
	z-index:999999;
	"></div>');
	var htmltop='<div style="padding:8px 0px;
	border:1px solid #090;
	width:100%;
	margin:0 auto;
	background-color:#FFF2F8;
	color:#090;
	border:3px #090 solid;
	;
	text-align:center;
	font-size:16px;
	"><img style="margin-right:10px;
	" src="images/success.png">';
	var htmlfoot='</div>';
	$('.msg_bg').height($(document).height());
	var left=($(document).width()-500)/2;
	$('.sub_err').css({
	'left':left+'px'}
);
	$('.sub_err').html(htmltop+msg+htmlfoot);
	var scroll_height=$(document).scrollTop();
	$('.sub_err').animate({
	'top':scroll_height+120}
,500);
	msgdsq=setTimeout(function(){
	$('.sub_err').animate({
	'top':scroll_height+80}
,500);
	setTimeout(function(){
	$('.msg_bg').remove();
	$('.sub_err').remove();
	if(url!=''){
	location.href=url;
}
}
,800);
}
,"1200");
}
//显示加载动画function show_loading(){
	var str='<div class="msg_bg" style="background:#000;
	opacity:0.5;
	filter:alpha(opacity=50);
	z-index:99998;
	width:100%;
	position:absolute;
	left:0;
	top:0"></div>';
	str+='<div class="msg_bg" style="z-index:99999;
	width:100%;
	position:absolute;
	left:0;
	top:0;
	text-align:center;
	"><img src="images/loading.gif" alt="" class="loading"></div>'$('body').append(str);
	var scroll_height=$(document).scrollTop();
	$('.msg_bg').height($(document).height());
	$('.loading').css('margin-top',scroll_height+240);
}

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