简介
这是一个基于jQuery的顶部弹出提示。
TopTips
HTML
首先引入jQuery
<!-- jquery -->
<script src="https://s2.pstatp.com/cdn/expire-1-M/jquery/3.4.0/jquery.min.js" type="application/javascript"></script>
添加一个class名为TopTips的div容器
<!-- TopTips -->
<div class="toptips"></div>
CSS
.toptips{
display: none;
position: fixed;
-webkit-transform: translateZ(0);
transform: translateZ(0);
top: 8px;
left: 8px;
right: 8px;
padding: 10px;
border-radius: 8px;
font-size: 14px;
text-align: center;
color: #fff;
z-index: 5000;
word-wrap: break-word;
word-break: break-all;
background-color: #fa5151;
}
JavaScript
//顶部提示
function toptips(text, color, time){
if (!time) {
time = 2000
} else if (time == 'always') {
time = 9999999999999;
}
if(!text){
$('.toptips').css({'background': '#fa5151'}).text('Error:toptips() 发生错误').fadeIn("200")
}else{
if(!color){
$('.toptips').css({'background': '#06ae56'}).text(text).fadeIn("200")
} else if(color == 'danger'){
$('.toptips').css({'background': '#fa5151'}).text(text).fadeIn("200")
}else if(color == 'warn'){
$('.toptips').css({'background': '#ffc300'}).text(text).fadeIn("200")
}else if(color == 'info'){
$('.toptips').css({'background': '#00947e'}).text(text).fadeIn("200")
}else if(color == 'success'){
$('.toptips').css({'background': '#06ae56'}).text(text).fadeIn("200")
}else{
$('.toptips').css({'background': '#fa5151'}).text('Error:toptips() 发生错误').fadeIn("200")
}
}
$('body').css({ 'pointer-events': 'none' })
close(time)
}
// 关闭顶部提示
function close(time) {
setTimeout(function () {
$('body').removeAttr('style', '')
$('.toptips').fadeOut("200")
}, time)
}
使用方法
直接调用toptips(text, color, time)
函数
属性 | 值 |
---|---|
text | 提示的文字 |
color | 颜色(默认success,四种样式可用) |
time | 时间(默认200毫秒,当为always即为不消失) |
允许省略color
和time
或者只省略time
,但是不可以只省略color
,会导致出错。