Bootstrap的popover(弹出框)2秒后定时消失的实现代码


Posted in Javascript onFebruary 27, 2017

Bootstrap Popover(弹出框)是使用定制的 Jquery 插件创建的。它可以用来显示任何元素的一些信息。

先在目标DOM结构中弹出小提示,然后2秒后提示消失

<input type="text" class="form-control" id="tableName" placeholder="请输入表格名称" data-toggle="tooltip" data-placement="top">
<script>
function showPopover(target, msg) {
  target.attr("data-original-title", msg);
  $('[data-toggle="tooltip"]').tooltip();
  target.tooltip('show');
  target.focus();
  //2秒后消失提示框
  var id = setTimeout(
    function () {
      target.attr("data-original-title", "");
      target.tooltip('hide');
    }, 2000
  );
}
showPopover($("#tableName"),"表名已存在");
</script>

以上所述是小编给大家介绍的Bootstrap的popover(弹出框)2秒后定时消失,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 提交和设置表单的值
Dec 19 Javascript
JavaScript isArray()函数判断对象类型的种种方法
Oct 11 Javascript
js实现图片旋转的三种方法
Apr 10 Javascript
jQuery实现简单的间隔向上滚动效果
Mar 09 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
Jan 27 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
May 23 Javascript
jquery对象与DOM对象转化
Feb 08 Javascript
vue2.0移除或更改的一些东西(移除index key)
Aug 28 Javascript
彻底弄懂 JavaScript 执行机制
Oct 23 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
Oct 16 Javascript
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
jQuery实现元素的插入
Feb 27 #Javascript
jQuery实现导航回弹效果
Feb 27 #Javascript
使用jQuery操作DOM的方法小结
Feb 27 #Javascript
jQuery模拟淘宝购物车功能
Feb 27 #Javascript
原生js实现轮播图
Feb 27 #Javascript
PHP实现本地图片上传和验证功能
Feb 27 #Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
Feb 27 #Javascript
You might like
php基础知识:控制结构
2006/12/13 PHP
PHP一些常用的正则表达式字符的一些转换
2008/07/29 PHP
PHP APC缓存配置、使用详解
2014/03/06 PHP
百度工程师讲PHP函数的实现原理及性能分析(二)
2015/05/13 PHP
Yii2搭建后台并实现rbac权限控制完整实例教程
2016/04/28 PHP
php版微信公众号接口实现发红包的方法
2016/10/14 PHP
POST一个JSON格式的数据给Restful服务实例详解
2017/04/07 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
laravel实现登录时监听事件,添加登录用户的记录方法
2019/09/30 PHP
javascript之可拖动的iframe效果代码
2008/08/01 Javascript
写入cookie的JavaScript代码库 cookieLibrary.js
2009/10/24 Javascript
ExtJs中简单的登录界面制作方法
2010/08/19 Javascript
juqery 学习之四 筛选过滤
2010/11/30 Javascript
jQuery选择器的工作原理和优化分析
2011/07/25 Javascript
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
2012/10/11 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
2014/05/07 Javascript
node.js下when.js 的异步编程实践
2014/12/03 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
2016/01/26 Javascript
微信小程序开发之toast等弹框提示使用教程
2017/06/08 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
2017/07/19 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
2017/11/17 Javascript
tracking.js页面人脸识别插件使用方法
2020/04/16 Javascript
JavaScript制作3D旋转相册
2020/08/02 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
2020/08/25 Javascript
uin-app+mockjs实现本地数据模拟
2020/08/26 Javascript
python实现AES和RSA加解密的方法
2019/03/28 Python
python制作图片缩略图
2019/04/30 Python
python找出一个列表中相同元素的多个索引实例
2019/06/11 Python
python numpy数组复制使用实例解析
2020/01/10 Python
Django 实现对已存在的model进行更改
2020/03/28 Python
TensorFlow keras卷积神经网络 添加L2正则化方式
2020/05/22 Python
Debenhams爱尔兰:英国知名的百货公司
2017/01/02 全球购物
英国布鲁姆精品店:Bloom Boutique
2018/03/01 全球购物
2015年学校财务工作总结
2015/05/19 职场文书
2016年大学生党员公开承诺书
2016/03/24 职场文书
导游词之广州陈家祠
2019/10/21 职场文书