Bootstrap的popover(弹出框)2秒后定时消失的实现代码
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秒后定时消失,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
相关推荐
-
Bootstrap每天必学之弹出框(Popover)插件
Bootstrap弹出框插件,提供了一个扩展的视图,弹出框(Popover)插件根据需求生成内容和标记,默认情况下是把弹出框(popover)放在它们的触发元素后面. 弹出框(Popover)与工具提示(Tooltip)类似,提供了一个扩展的视图.如需激活弹出框,用户只需把鼠标悬停在元素上即可.弹出框的内容完全可使用 Bootstrap 数据 API(Bootstrap Data API)来填充.该方法依赖于工具提示(tooltip). 如果您想要单独引用该插件的功能,那么您需要引用 popov
-
Bootstrap的popover(弹出框)在append后弹不出(失效)
在使用popover(弹出框)时,发现跟其他组件使用方式有些区别,需要手动初始化才能弹出来,如下: <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus
-
妙用Bootstrap的 popover插件实现校验表单提示功能
最近的项目,用Bootstrap比较多.浏览Bootstrap文档,发现 popover 插件特别适合做表单校验出错的提示. 因为使的非常频繁,最近把它封住下,做成 jQuery的插件. 通过 本插件,在 html标签中 定义好 data-vaild="校验正则" data-errmsg="错误信息即可".为什么 要把 校验规则 写到 html 标签中呢?因为 我还用它做了 后台 的校验规则(后台没用Node,现在用的ASP,忙完专门再发文写下原理). <in
-
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
弹出框(Popover)与工具提示(Tooltip)类似,提供了一个扩展的视图.如需激活弹出框,用户只需把鼠标悬停在元素上即可.弹出框的内容完全可使用 Bootstrap 数据 API(Bootstrap Data API)来填充.该方法依赖于工具提示(tooltip). 1 设置延时, 超过该延时未移入弹窗则弹窗隐藏 Tooltip.prototype.init = function{中的 var triggers = this.options.trigger.split(' ')后面加上 /
-
Bootstrap基本插件学习笔记之Popover提示框(19)
Tooltip采用的是hover方式弹出提示框(参见前一篇:Bootstrap学习总结笔记(18)– 基本插件之Tooltip提示工具),适合提示内容比较少的情况,要是内容较多,就可以应用Popover提示框. <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" cont
-
全面解析Bootstrap中tooltip、popover的使用方法
一.tooltip(提示框) 源码文件: Tooltip.js Tooltip.scss 实现原理: 1.获取当前要显示tooltip的元素的定位信息(top.left.bottom.right.width.height等) 2.计算tooltip的位置,是top.left.bottom.right其中一个 3.然后根据计算的位置值,运算出坐标值 4.给tooltip应用坐标值 源码分析: 1.ownerDocument:文档:包含两个对象:<DocType>.documentEle
-
Bootstrap popover用法详解
最近在自学Java Web基础,搭建自己的页面时候用到了Boostrap的JS库.由于之前没有接触过JQuery,所以用起来磕磕绊绊,所以在这里简单记一下Boostrap中我用到的JS 插件的一些用法. 第一个用到的就是Boostrap中的popover插件.原因是一个简单的注册界面需要验证用户名是否合法,是否已被注册,密码是否合法,再次输入密码是否和之前的密码匹配等,需要用到popover来进行信息警告. 首先一个简单的例子: <div class="container" st
-
BootStrap使用popover插件实现鼠标经过显示并保持显示框
在商城里,导航栏的购物车展示经常需要鼠标经过时,显示已经放入购物车的商品,bootstrap是没有直接用的插件的,这个时候就可以使用popover这个插件改造后实现,具体如下: 实现效果图: html实现: <a href="#" rel="drevil"> <span class="glyphicon glyphicon-shopping-cart"> </span> 购物车 </a> javas
-
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
Bootstrap Popover(弹出框)是使用定制的 Jquery 插件创建的.它可以用来显示任何元素的一些信息. 先在目标DOM结构中弹出小提示,然后2秒后提示消失 <input type="text" class="form-control" id="tableName" placeholder="请输入表格名称" data-toggle="tooltip" data-placement=&q
-
bootstrap 点击空白处popover弹出框隐藏实例
代码: <div> <a class="btn btn-success show" title="Popover title" data-container="body" data-toggle="popover" data-placement="bottom" data-content="底部的 Popover 中的一些内容"> aaaa </a>
-
BootStrap下的弹出框加载select2框架失败的解决方法
bootstrap下的弹出框加载select2框架失败的解决方案如下所示: $("#modal").on("shown.bs.modal", function(){ //等待弹出框弹出后再渲染select2控件 $("#select2").select2({ //再次渲染父界面后才能够加载出来数据. dropdownParent:$("#mpu_chart"), placeholder: '请选择变量', data:mpuKe
-
Element Popover 弹出框的使用示例
组件- 弹出框 基础用法 <template> <el-popover placement="top-start" title="标题" width="200" trigger="hover" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容."> <el-button slot="reference">hover 激活<
-
微信浏览器弹出框滑动时页面跟着滑动的实现代码(兼容Android和IOS端)
在做微信开发的时候遇到这个问题:微信浏览器弹出框滑动时页面跟着滑动. 我觉得这个问题用的是下面这几行代码: var $body = $('body'), dialogIsInView = !1,//当前是不是对话框 lastContentContainerScrollTop = -1,//用于弹出框禁止内容滚动 $contentContainer = $('#content-container');//内容容器 //阻止Window滚动 function stopWindowScroll() {
-
BootStrap初学者对弹出框和进度条的使用感觉
Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. bootstrap 框架提供的进度条,如菜鸟教程里面的这些代码 <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60&qu
-
关于Bootstrap弹出框无法调用问题的解决办法
问题描述 写项目中使用到了前端框架bootstrap,提供的功能很强大! bootstrap学习 然而在用bootstrap提供的弹出框组件时,弹出框怎么也弹不出! 按理说应该这样: 官方给出的样例是这样写的: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 弹出框(Popover)插件</title> <link href="http://libs.baidu.com/bo
-
bootstrap modal+gridview实现弹出框效果
项目需要在gridview的表单信息中点击更新,弹出表单进行操作,不需要跳转. 1.在girdview中加入更新操作按钮用来调用modal弹窗 'buttons' => [ 'update' => function ($url, $model, $key) { return Html::a('<span class="glyphicon glyphicon-pencil"></span>', '#', [ 'data-toggle' => 'm
随机推荐
- 基于Jquery实现仿百度百科右侧导航代码附源码下载
- Eclipse连接Mysql数据库操作总结
- iOS 正则表达式详解
- listview里的button事件添加方法
- es6学习笔记之Async函数的使用示例
- ThinkPHP登录功能的实现方法
- PHP查找与搜索数组元素方法总结
- ThinkPHP模板替换与系统常量及应用实例教程
- PHP使用数组实现矩阵数学运算的方法示例
- 跟老齐学Python之通过Python连接数据库
- Python按行读取文件的实现方法【小文件和大文件读取】
- JavaScript实现动画打开半透明提示层的方法
- centos+php+coreseek+sphinx+mysql之一coreseek安装篇
- PHP使用imagick扩展实现合并图像的方法
- 卸载VS2011 Developer Preview后Sql Server2008 R2建立数据库关系图报“找不到指定的模块”错误的解决方法
- PHP中使用localhost连接Mysql不成功的解决方法
- js取得当前网址
- 关于C语言多线程pthread库的相关函数说明
- 浏览器事件循环与vue nextTicket的实现
- 详解如何实现Element树形控件Tree在懒加载模式下的动态更新