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 ...
随机推荐
- Java Security:公钥私钥、数字签名、消息摘要是什么
1. 鲍勃有两把钥匙,一把是公钥,另一把是私钥. 2. 鲍勃把公钥送给他的朋友们----帕蒂.道格.苏珊----每人一把. 3. 苏珊要给鲍勃写一封保密的信.她写完后用鲍勃的公钥加密,就可以达到保密的 ...
- Java AIO 异步IO应用实例
项目地址:https://github.com/windwant/aio-test Server: package org.windwant.aio; import java.io.IOExcepti ...
- 深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点
深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点 2011-12-28 23:00 by 汤姆大叔, 139489 阅读, 119 评论, 收藏, 编辑 才华横溢的 ...
- SHA-1 加密算法破解现已只需要 10 天
转自:http://www.linuxeden.com/html/news/20151009/163173.html SHA-1是如今很常见的一种加密哈希算法,HTTPS传输和软件签名认证都很喜欢它, ...
- 学习OpenStack之 (2):Cinder LVM 配置
0.背景 OpenStack 中的实例是不能持久化的,cinder服务重启,实例消失.如果需要挂载 volume,需要在 volume 中实现持久化.Cinder提供持久的块存储,目前仅供给虚拟机挂载 ...
- css3 border-radius
前缀对应浏览器 前缀 浏览器 -webkit chrome和safari -moz firefox -ms IE -o opera border-radius: <style type=&quo ...
- GitHub 下载文件夹
工具 TortoiseSVN 步骤 1.打开要下载的项目,选中要下载的文件夹,右键 选择 复制链接地址 2.把链接中的 tree/master 改成 trunk ,(trunk是master分支,可以 ...
- [No000057]一个人默默背单词,小心被传染哦
不日凛冬将至,全国各地,已有多名少侠因季节变化,出现了不同程度的四肢不勤.bd不分的症状.具体表现为—— 包大人在此高能预警:不想背单词,有可能你已经被传染了. 好好的,怎么突然不想背单词了 哈佛医学 ...
- [No000056]你无法真正占有一个人,包括你的爱人,先生或太太、小孩,以及你自己....
从一出生,我们的双手就握的紧紧的,好像深知自己会失去什么 很多人迷信多子多孙才是福,老来才有依靠,但太多新闻告诉我们,很多人老了,子孙为了分家产,反而让他生不如死,死了还无法入土为安. 现实也告诉我们 ...
- Eclipse cpp 开发 include路径