简单好看的HTML顶部弹出提示

简介

这是一个基于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，会导致出错。

Github