一、创建提醒块
<html>
<body>
<div class="tips"></div>
</body>
</html>
二、css样式
/*提醒样式开始 wzj*/
.tips{
display: none;
position: fixed;
top: 50%;
left: 50%;
min-width: 200px;
margin-left: -100px;
z-index: 99999;
padding: 15px;
border: 1px solid transparent;
border-radius: 4px;
}
.tips-success{
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
}
.tips-info{
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1;
}
.tips-warning{
color: #8a6d3b;
background-color: #fcf8e3;
border-color: #faebcc;
}
.tips-danger{
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
}
/*提醒样式开始*/
js实现
$(":button").click(function(){
//显示“保存成功”，等待2.5秒，渐变消失
$(".tips").html("保存成功！").addClass("tips-success")
.show().delay(2500).fadeOut();
});
