jquery警告弹出提示js代码

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

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

以下是 jquery警告弹出提示js代码的示例演示效果:

当前平台(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=gb2312" />
<title>����ԭ������������ʾJquery���</title>
<link type="text/css" rel="stylesheet" href="css/css.css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/manhua_msgTips.js" type="text/javascript"></script>
<script type="text/javascript">
$(function (){
	$("#ie").manhua_msgTips({
		Event : "click",			//��Ӧ���¼�
		timeOut : 4000,				//��ʾ����ʾ��ʱ��
		msg : "Ϊ�˱�֤���õ���վ���飬������IE�汾��8.0������!",			//��ʾ����Ϣ
		speed : 300,				//�����ٶ�
		type : "warning"			//��ʾ���ͣ�1��success 2��error 3��warning��

	});
	$("#no").manhua_msgTips({
		Event : "click",			//��Ӧ���¼�
		timeOut : 4000,				//��ʾ����ʾ��ʱ��
		msg : "�ܱ�Ǹ!���ò����˲�����������²�����",			//��ʾ����Ϣ
		speed : 300,				//�����ٶ�
		type : "error"			//��ʾ���ͣ�1��success 2��error 3��warning��

	});
	$("#yes").manhua_msgTips({
		Event : "click",			//��Ӧ���¼�
		timeOut : 4000,				//��ʾ����ʾ��ʱ��
		msg : "��ϲ��!���ѳɹ������˲����ллʹ�ã�",			//��ʾ����Ϣ
		speed : 300,				//�����ٶ�
		type : "success"			//��ʾ���ͣ�1��success 2��error 3��warning��

	});

});
</script>
</head>
<body>
<div style="margin:300px auto; width:400px;"><input type="button" id="ie" value="������汾����ʾ" />&nbsp;&nbsp;<input type="button" id="no" value="����������ʾ" />&nbsp;&nbsp;<input type="button" id="yes" value="�����ɹ���ʾ" /></div>
</body>
</html>

JS代码(manhua_msgTips.js):

/*** * ����ԭ������������ʾJquery��� * ��дʱ�䣺2012��10��29�� * ��עJquerySchool��֧��ԭ�� * http://www.jq-school.com * version:manhua_msgTips.js***/
$(function(){
	$.fn.manhua_msgTips = function(options){
	var defaults ={
	Event:"click",//��Ӧ���¼�timeOut:3000,//��ʾ����ʾ��ʱ��msg:"thank you!",//��ʾ����Ϣspeed:300,//�����ٶ�type:"success"//��ʾ���ͣ�1��success 2��error 3��warning��}
;
	var options = $.extend(defaults,options);
	var bid = parseInt(Math.random()*100000);
	$("body").prepend('<div id="tip_container'+bid+'" class="container tip_container"><div id="tip'+bid+'" class="mtip"><i class="micon"></i><span id="tsc'+bid+'"></span><i id="mclose'+bid+'" class="mclose"></i></div></div>');
	var $this = $(this);
	var $tip_container = $("#tip_container"+bid)var $tip = $("#tip"+bid);
	var $tipSpan = $("#tsc"+bid);
	var $colse = $("#mclose"+bid);
	//�������ʱ��clearTimeout(window.timer);
	//����Ԫ�ذ��¼�$this.die().live(options.Event,function(){
	$tip.attr("class",options.type).addClass("mtip");
	$tipSpan.html(options.msg);
	$tip_container.slideDown(options.speed);
	//��ʾ�����ض�ʱ��window.timer = setTimeout(function (){
	$tip_container.slideUp(options.speed);
}
,options.timeOut);
}
);
	//����Ƶ���ʾ��ʱ�����ʱ��$tip_container.live("mouseover",function(){
	clearTimeout(window.timer);
}
);
	//����Ƴ���ʾ��ʱ�����ʱ��$tip_container.live("mouseout",function(){
	window.timer = setTimeout(function (){
	$tip_container.slideUp(options.speed);
}
,options.timeOut);
}
);
	//�رհ�ť���¼�$colse.live("click",function(){
	$tip_container.slideUp(options.speed);
}
);
}
}
);

CSS代码(css.css):

*{padding:0;margin:0}
.mtip .mclose,.mtip .mclose,.mtip .mclose{background-image:url("../images/mclose.png");background-repeat:no-repeat;display:inline-block;width:8px;height:8px;margin-top:4px;float:right;cursor:pointer}
.mtip.success .mclose{background-position:-16px 0}
.mtip.error .mclose{background-position:-8px 0}
.mtip.warning .mclose{background-position:0 0}
.mtip.success .mclose:hover{background-position:-16px -8px}
.mtip.error .mclose:hover{background-position:-8px -8px}
.mtip.warning .mclose:hover{background-position:0 -8px}
.mtip .micon{background-image:url("../images/micon.png");background-repeat:no-repeat;display:inline-block;width:16px;height:16px;padding-right:5px}
.mtip.error .micon{background-position:0 0;vertical-align:top}
.mtip.success .micon{background-position:0 -66px;vertical-align:top}
.mtip.warning .micon{background-position:0 -132px;vertical-align:top}
.mtip>span{vertical-align:3px;line-height:1;display:inline-block;width:510px}
.mtip{border-radius:0 0 4px 4px;padding:8px 8px 6px 8px;font-size:14px;text-shadow:0 1px 0 rgba(0,0,0,0.2);color:#fff;box-shadow:0 4px 4px rgba(0,0,0,0.2)}
.mtip.error{background-color:#cd3237;background-image:-moz-linear-gradient(top,#e34447,#cd3237);background-image:-ms-linear-gradient(top,#e34447,#cd3237);background-image:-webkit-gradient(linear,0 0,0 100%,from(#e34447),to(#cd3237));background-image:-webkit-linear-gradient(top,#e34447,#cd3237);background-image:-o-linear-gradient(top,#e34447,#cd3237);background-image:linear-gradient(top,#e34447,#cd3237);border:1px solid #ca3e3e}
.mtip.success{background-color:#43ab00;background-image:-moz-linear-gradient(top,#43ab00,#388e00);background-image:-ms-linear-gradient(top,#43ab00,#388e00);background-image:-webkit-gradient(linear,0 0,0 100%,from(#43ab00),to(#388e00));background-image:-webkit-linear-gradient(top,#43ab00,#388e00);background-image:-o-linear-gradient(top,#43ab00,#388e00);background-image:linear-gradient(top,#43ab00,#388e00);border:1px solid #338100}
.mtip.warning{background-color:#0f76cd;background-image:-moz-linear-gradient(top,#0f76cd,#086cc1);background-image:-ms-linear-gradient(top,#0f76cd,#086cc1);background-image:-webkit-gradient(linear,0 0,0 100%,from(#0f76cd),to(#086cc1));background-image:-webkit-linear-gradient(top,#0f76cd,#086cc1);background-image:-o-linear-gradient(top,#0f76cd,#086cc1);background-image:linear-gradient(top,#0f76cd,#086cc1);border:1px solid #006096}
.tip_container{display:none;z-index:9999;position:fixed;top:0;left:50%;margin-left:-300px;text-align:left;width:600px;}

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