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

时间:2023-03-09 02:39:24
Jquery 网站保存信息提示消息实现,提示后自动消失

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

css

<style>
#tip_message {
z-index:;
position: fixed;
left:;
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;
}
</style>

javascript代码如下:

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){ //提示成功信息
ShowSuccessMessage = function(message, life) {
var time = 3000;
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);
$("#tip_message").fadeOut(time); }; //提示错误信息
ShowErrorMessage = function(message, life) {
ShowSuccessMessage(message, life);
$("#tip_message span").addClass("error");
}; ShowSuccessMessage("Hello success!", 1000); // 第二个参数life是指消息显示时间
//ShowErrorMessage("Hello error!", 1000);
}); </script>