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 字符串连接性能优化
Dec 20 Javascript
js浮动图片的动态效果
Jul 10 Javascript
jquery网页元素拖拽插件效果及实现
Aug 05 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
Jan 22 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
Mar 18 Javascript
基于jquery步骤进度条源码分享
Nov 12 Javascript
详解JavaScript对象类型
Jun 16 Javascript
Bootstrap前端开发案例一
Jun 17 Javascript
移动端界面的适配
Jan 11 Javascript
Javascript实现数组中的元素上下移动
Apr 28 Javascript
JS脚本加载后执行相应回调函数的操作方法
Feb 28 Javascript
JS面向对象编程——ES6 中class的继承用法详解
Mar 03 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下利用shell后台运行PHP脚本,并获取该脚本的Process ID的代码
2011/09/19 PHP
基于php在各种web服务器的运行模式详解
2013/06/03 PHP
PHP Cookie的使用教程详解
2013/06/03 PHP
Yii2中SqlDataProvider用法示例
2016/09/22 PHP
JavaScript多线程的实现方法
2007/05/08 Javascript
javascript小数计算出现近似值的解决办法
2010/02/06 Javascript
Nodejs极简入门教程(一):模块机制
2014/10/25 NodeJs
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
2015/11/15 Javascript
Document.body.scrollTop的值总为零的快速解决办法
2016/06/09 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
2016/11/05 Javascript
Three.js的使用及绘制基础3D图形详解
2017/04/27 Javascript
bootstrap Table服务端处理分页(后台是.net)
2017/10/19 Javascript
JS脚本实现网页自动秒杀点击
2018/01/11 Javascript
js实现弹出框的拖拽效果实例代码详解
2019/04/16 Javascript
angular异步验证防抖踩坑实录
2019/12/01 Javascript
JavaScript动态生成表格的示例
2020/11/02 Javascript
Flask SQLAlchemy一对一,一对多的使用方法实践
2013/02/10 Python
离线安装Pyecharts的步骤以及依赖包流程
2020/04/23 Python
机器学习python实战之手写数字识别
2017/11/01 Python
解决Python获取字典dict中不存在的值时出错问题
2018/10/17 Python
Python计算库numpy进行方差/标准方差/样本标准方差/协方差的计算
2018/12/28 Python
python添加模块搜索路径和包的导入方法
2019/01/19 Python
用Python批量把文件复制到另一个文件夹的实现方法
2019/08/16 Python
Django如何在不停机的情况下创建索引
2020/08/02 Python
python爬虫中抓取指数的实例讲解
2020/12/01 Python
css3实现可滑动跳转的分页插件示例
2014/05/08 HTML / CSS
吃透移动端 Html5 响应式布局
2019/12/16 HTML / CSS
出门问问全球官方商城:Tichome音箱和TicWatch智能手表
2017/12/02 全球购物
SQL注入攻击的种类有哪些
2013/12/30 面试题
医院实习介绍信
2014/01/12 职场文书
会计大学生职业生涯规划书范文
2014/01/13 职场文书
烈士陵园观后感
2015/06/08 职场文书
护士自荐信范文(2016推荐篇)
2016/01/28 职场文书
golang 如何用反射reflect操作结构体
2021/04/28 Golang
在Windows Server 2012上安装 .NET Framework 3.5 所遇到的问题
2022/04/29 Servers
MySQL详细讲解变量variables的用法
2022/06/21 MySQL