bootstrap的popover插件在focus模式时在Safari浏览器无法使用的bug解决方案
前言
最近在使用bootstrap的popover插件,效果如下:

popover插件的focus模式时表现为当点击按钮时弹出浮动层,在点击浮动层外的任何一处,都隐藏浮动层。
但是在mac下的Safari浏览器中无法弹出浮动层,bug导致原因未知,官方demo也是如此。
解决方案
最后反复试验,发现一种解决方案,非常简单,即在给按钮绑定鼠标事件,然后手动触发dom的focus事件,也就连带触发了popover插件的显示事件。
var $btn=$(".btn");
$btn.mouseup(function(){
$btn.focus();
})
$btn.popover({
title: "",
placement:"bottom",
content: "xxxxxxxxxxxx",
trigger:"focus",
html:true,
});
bootstrap的popover插件在focus模式时在Safari浏览器无法使用的bug解决方案的更多相关文章
- bootstrap的popover在trigger设置为hover时不隐藏popover
使用bootstrap的popover,trigger设置为hover时,可以实现当鼠标放置到目标元素上时显示popover,可是无法实现当鼠标移动到popover上时不隐藏popover,在网上找了 ...
- Bootstrap历练实例:popover插件中的方法
方法 下面是一些弹出框(Popover)插件中有用的方法: 方法 描述 实例 Options: .popover(options) 向元素集合附加弹出框句柄. $().popover(options) ...
- Bootstrap 弹出框(Popover)插件
Bootstrap 弹出框(Popover)插件与Bootstrap 提示工具(Tooltip)插件类似,提供了一个扩展的视图,用户只需要把鼠标指针悬停到元素上面即可.弹出框的内容完全由Bootstr ...
- 使用Bootstrap的popover标签中嵌入插件,并且为插件注册事件实现Ajax与后台交互
下午研究了一下bootstrap的popover写了个例子.如果项目很多地方都需要用到可以考虑封装成插件. javascript代码: <script type="text/javas ...
- 在angular项目中使用bootstrap的tooltip插件时,报错Property 'tooltip' does no t exist on type 'JQuery<HTMLElement>的解决方法和过程
在angular4的项目中需要使用bootstrap的tooltip插件. 1. 使用命令安装jQuery和bootstrap npm install bootstrap jquery --save ...
- 使用bootstrap的JS插件实现模态框效果
在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...
- bootstrap学习笔记 插件概述
Bootstrap插件概览 在前面布局组件章节中所讨论的组件仅仅是个开始.Bootstrap自带的12种jQuery插件,扩展了功能,可以给站点添加更多的互动.即使您不是一名高级的js开发人员, 你也 ...
- bootstrap中popover.js(弹出框)使用总结+案例
bootstrap中popover.js(弹出框)使用总结+案例 *转载请注明出处: 作者:willingtolove: http://www.cnblogs.com/willingtolove/p/ ...
- bootstrap的日期插件datetimepicker有问题
bootstrap的日期插件datetimepicker在chrome中会出现掉下来的现象,而且一直没找到原因,下载最新版的插件直接在各个浏览器中都会掉下来, 问题一直解决不了,转而换其他插件 htt ...
随机推荐
- C#调用SQL Server参数过程传参
-SQL SERVER生成测试环境: Create database Test; go USE [Test] GO if OBJECT_ID('Tab2','U') is not null drop ...
- MySQL创建和操作数据库表demo
[1]建立员工档案表要求字段:员工员工编号,员工姓名,性别,工资,email,入职时间,部门. [2]合理选择数据类型及字段修饰符,要求有NOT NULL,auto_increment, primar ...
- 讲讲js中的逻辑与(&&)以及逻辑或(||)
前几天看到一个函数,百思不得其解,今天早上醒来看了本js的书,正好讲到操作符的用法,给大家分享下js中的&&,||,和我们用的其他的编程语言还是有点区别的. 直接上那个函数的代码: f ...
- 【转】MySQL 高可用架构在业务层面的分析研究
原文地址 http://database.51cto.com/art/201507/483463_all.htm 前言: 相对于传统行业的相对服务时间9x9x6或者9x12x5,因为互联网电子商务以及 ...
- linux 源码安装mysql 5.5
今天在ubuntu和CentOS下,用源码反复安装了许多次mysql,趁还没忘记,赶紧记下来... 在ubuntu和CentOS下安装过程倒是没什么差别. 0.下载源码, ...
- python标准库00 学习准备
Python标准库----走马观花 python有一套很有用的标准库.标准库会随着python解释器一起安装在你的电脑上的.它是python的一个组成部分.这些标准库是python为你准备的利器,可以 ...
- (转)yii流程,入口文件下的准备工作
yii流程 一 目录文件 |-framework 框架核心库 |--base 底层类库文件夹,包含CApplication(应用类,负责全局的用户请求处理,它管理的应用组件集, ...
- C++浅析——虚表和虚表Hook
为了探究虚表的今生前世,先来一段测试代码 虚函数类: class CTest { public: int m_nData; virtual void PrintData() { printf(&quo ...
- C#笔记---动态类(Dynamic)应用
背景: 在Coding中有时候会遇到一些需要解析的数据,可是数据的字段数量和名称未统一,我们没法定义实体类来对应.那么我们就会想到通过C#的dynamic动态类来实现,如果大家注意的话一些ORM框架里 ...
- Java实现点击一个Jlabel增加一个Jlabel的小功能
当界面生成以后,自己想做一个点击一个Jlabel增加一个Jlabel,即类似于QQ的添加好友以后可以及时的加进一个好友.自己做了好久,发现不能及时刷新.在网上查了一下,然后自己研究了一小会.发现需要v ...