Jquery 网站保存信息提示消息实现，提醒后自动消失

Jquery 网站保存信息提示消息实现，提示后自动消失

现在的大多数网站都有校验，以及信息提示：为了给用户更好的体验可以不用alert提示消息，采用jQuery提示完消息，自动消失，如下图：

css:如下：

#tip_message {
	z-index: 9999;
	position: fixed;
	left: 0;
	top: 40%;
	text-align: center;
	width: 100%;
}

#tip_message span {
	background-color: #03C440;
	opacity: .8;
	padding: 20px 50px;
	border-radius: 5px;
	text-align: center;
	color: #fff;
	font-size: 20px;
}

#tip_message span.error {
	background-color: #EAA000;
}

javascript代码如下：

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		
	//提示成功信息	
	ShowSuccessMessage = function(message, life) {
		var time = 50000;
		if (!life) {
			time = life;
		}
		
		if ($("#tip_message").text().length > 0) {
	    	var msg = "<span>" + message + "</span>";
	        $("#tip_message").empty().append(msg);
	    } else {
			var msg = "<div id='tip_message'><span>" + message + "</span></div>";
			$("body").append(msg);
	    }
		
		$("#tip_message").fadeIn(time);
  
		setTimeout($("#tip_message").fadeOut(time), time);

	};
	
	//提示错误信息
	ShowErrorMessage = function(message, life) {
		ShowSuccessMessage(message, life);
		$("#tip_message span").addClass("error");
	};
	
	ShowMessage("Hello success!", 5000); // 第二个参数life是指消息显示时间
	ShowErrorMessage("Hello error!", 50000);
	});

</script>