Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码


Posted in Javascript onAugust 27, 2020

最近用到bootstrap的告警框时发现只有html的说明,就自己写了一个弹出告警框和弹出短暂显示后上浮消失的告警框。

Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码

使用效果

Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码

移入时停止上浮的效果

Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码

直接上JS代码了,可以copy过去直接用(使用bootstrap的UI框架的情况下)

var commonUtil = {
  /**
   * 弹出消息框
   * @param msg 消息内容
   * @param type 消息框类型(参考bootstrap的alert)
   */
  alert: function(msg, type){
    if(typeof(type) =="undefined") { // 未传入type则默认为success类型的消息框
      type = "success";
    }
    // 创建bootstrap的alert元素
    var divElement = $("<div></div>").addClass('alert').addClass('alert-'+type).addClass('alert-dismissible').addClass('col-md-4').addClass('col-md-offset-4');
    divElement.css({ // 消息框的定位样式
      "position": "absolute",
      "top": "80px"
    });
    divElement.text(msg); // 设置消息框的内容
    // 消息框添加可以关闭按钮
    var closeBtn = $('<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>');
    $(divElement).append(closeBtn);
    // 消息框放入到页面中
    $('body').append(divElement);
    return divElement;
  },
  
  /**
   * 短暂显示后上浮消失的消息框
   * @param msg 消息内容
   * @param type 消息框类型
   */
  message: function(msg, type) {
    var divElement = commonUtil.alert(msg, type); // 生成Alert消息框
    var isIn = false; // 鼠标是否在消息框中
    
    divElement.on({ // 在setTimeout执行之前先判定鼠标是否在消息框中
    mouseover : function(){isIn = true;},
    
mouseout : function(){isIn = false;}
    });

    // 短暂延时后上浮消失
    setTimeout(function() {
      var IntervalMS = 20; // 每次上浮的间隔毫秒
      var floatSpace = 60; // 上浮的空间(px)
      var nowTop = divElement.offset().top; // 获取元素当前的top值
      var stopTop = nowTop - floatSpace;  // 上浮停止时的top值
      divElement.fadeOut(IntervalMS * floatSpace); // 设置元素淡出
      
      var upFloat = setInterval(function(){ // 开始上浮
        if (nowTop >= stopTop) { // 判断当前消息框top是否还在可上升的范围内
          divElement.css({"top": nowTop--}); // 消息框的top上升1px
        } else {
          clearInterval(upFloat); // 关闭上浮
          divElement.remove();  // 移除元素
        }
      }, IntervalMS);

      if (isIn) { // 如果鼠标在setTimeout之前已经放在的消息框中,则停止上浮
        clearInterval(upFloat);
        divElement.stop();
      }
      
      divElement.hover(function() { // 鼠标悬浮时停止上浮和淡出效果,过后恢复
        clearInterval(upFloat);
        divElement.stop();
      },function() {
        divElement.fadeOut(IntervalMS * (nowTop - stopTop)); // 这里设置元素淡出的时间应该为:间隔毫秒*剩余可以上浮空间
        upFloat = setInterval(function(){ // 继续上浮
          if (nowTop >= stopTop) {
            divElement.css({"top": nowTop--});
          } else {
            clearInterval(upFloat); // 关闭上浮
            divElement.remove();  // 移除元素
          }
        }, IntervalMS);
      });
    }, 1500);
  }
}

调用部分

function login() {
  $.ajax({
    url: "/apis/login/session",
    data: $('#loginForm').serialize(),
    dataType:"json",
    contentType: "application/json",
    success: function(result) {
      commonUtil.message(result.message); // 直接调用commonUtil对象的message方法
    }
  });
}

总结

到此这篇关于Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的文章就介绍到这了,更多相关Bootstrap告警框(alert)内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
一些经常会用到的Javascript检测函数
May 31 Javascript
js读取本地excel文档数据的代码
Nov 11 Javascript
页面调用单个swf文件,嵌套出多个方法。
Nov 21 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
Mar 14 Javascript
JS中的构造函数详细解析
Mar 10 Javascript
JavaScript DOM事件(笔记)
Apr 08 Javascript
使用AngularJS实现可伸缩的页面切换的方法
Jun 19 Javascript
jquery ajaxfileupload异步上传插件使用详解
Feb 08 Javascript
手把手搭建安装基于windows的Vue.js运行环境
Jun 12 Javascript
详解Node.js access_token的获取、存储及更新
Jun 20 Javascript
Vue 组件封装 并使用 NPM 发布的教程
Sep 30 Javascript
javascript this指向相关问题及改变方法
Nov 19 Javascript
javascript操作向表格中动态加载数据
Aug 27 #Javascript
Vue为什么要谨慎使用$attrs与$listeners
Aug 27 #Javascript
js实现批量删除功能
Aug 27 #Javascript
js利用拖放实现添加删除
Aug 27 #Javascript
基于jquery实现彩色投票进度条代码解析
Aug 26 #jQuery
Javascript call及apply应用场景及实例
Aug 26 #Javascript
Javascript类型判断相关例题及解析
Aug 26 #Javascript
You might like
深入PHP中慎用双等于(==)的详解
2013/06/06 PHP
thinkphp验证码显示不出来的解决方法
2014/03/29 PHP
Laravel 4.2 中队列服务(queue)使用感受
2014/10/30 PHP
php判断表是否存在的方法
2015/06/18 PHP
PHP中字符与字节的区别及字符串与字节转换示例
2016/10/15 PHP
利用laravel+ajax实现文件上传功能方法示例
2017/08/13 PHP
php面向对象程序设计中self与static的区别分析
2019/05/21 PHP
laravel框架中间件简单使用方法示例
2020/01/25 PHP
YII2框架中日志的配置与使用方法实例分析
2020/03/18 PHP
JavaScript中的Location地址对象
2008/01/16 Javascript
20个非常棒的Jquery实用工具 国外文章
2010/01/01 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
2015/11/22 Javascript
JQuery核心函数是什么及使用方法介绍
2016/05/03 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
2016/07/04 Javascript
终于实现了!精彩的jquery弹幕效果
2016/07/18 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
2017/03/29 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
2018/10/25 Javascript
vue搜索和vue模糊搜索代码实例
2019/05/07 Javascript
js回调函数原理与用法案例分析
2020/03/04 Javascript
原生JS实现贪吃蛇小游戏
2020/03/09 Javascript
python实现的正则表达式功能入门教程【经典】
2017/06/05 Python
Python实现将通信达.day文件读取为DataFrame
2018/12/22 Python
python使用KNN算法识别手写数字
2019/04/25 Python
Python搭建代理IP池实现存储IP的方法
2019/10/27 Python
python3连接kafka模块pykafka生产者简单封装代码
2019/12/23 Python
Tensorflow 实现将图像与标签数据转化为tfRecord文件
2020/02/17 Python
基于virtualenv创建python虚拟环境过程图解
2020/03/30 Python
python openpyxl模块的使用详解
2021/02/25 Python
CSS3解决移动页面上点击链接触发色块的问题
2016/06/03 HTML / CSS
html5如何在Canvas中实现自定义路径动画示例
2017/09/18 HTML / CSS
西班牙创意礼品和小工具网上商店:Curiosite
2016/07/26 全球购物
手工制作的豪华英式沙发和沙发床:Willow & Hall
2019/05/03 全球购物
中文专业求职信
2014/06/20 职场文书
圆明园观后感
2015/06/03 职场文书
详解Laravel制作API接口
2021/05/31 PHP
零基础学java之方法的定义与调用详解
2022/04/10 Java/Android