前言

最近在使用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解决方案的更多相关文章

  1. bootstrap的popover在trigger设置为hover时不隐藏popover

    使用bootstrap的popover,trigger设置为hover时,可以实现当鼠标放置到目标元素上时显示popover,可是无法实现当鼠标移动到popover上时不隐藏popover,在网上找了 ...

  2. Bootstrap历练实例:popover插件中的方法

    方法 下面是一些弹出框(Popover)插件中有用的方法: 方法 描述 实例 Options: .popover(options) 向元素集合附加弹出框句柄. $().popover(options) ...

  3. Bootstrap 弹出框(Popover)插件

    Bootstrap 弹出框(Popover)插件与Bootstrap 提示工具(Tooltip)插件类似,提供了一个扩展的视图,用户只需要把鼠标指针悬停到元素上面即可.弹出框的内容完全由Bootstr ...

  4. 使用Bootstrap的popover标签中嵌入插件,并且为插件注册事件实现Ajax与后台交互

    下午研究了一下bootstrap的popover写了个例子.如果项目很多地方都需要用到可以考虑封装成插件. javascript代码: <script type="text/javas ...

  5. 在angular项目中使用bootstrap的tooltip插件时,报错Property 'tooltip' does no t exist on type 'JQuery<HTMLElement>的解决方法和过程

    在angular4的项目中需要使用bootstrap的tooltip插件. 1. 使用命令安装jQuery和bootstrap npm install bootstrap jquery --save ...

  6. 使用bootstrap的JS插件实现模态框效果

    在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...

  7. bootstrap学习笔记 插件概述

    Bootstrap插件概览 在前面布局组件章节中所讨论的组件仅仅是个开始.Bootstrap自带的12种jQuery插件,扩展了功能,可以给站点添加更多的互动.即使您不是一名高级的js开发人员, 你也 ...

  8. bootstrap中popover.js(弹出框)使用总结+案例

    bootstrap中popover.js(弹出框)使用总结+案例 *转载请注明出处: 作者:willingtolove: http://www.cnblogs.com/willingtolove/p/ ...

  9. bootstrap的日期插件datetimepicker有问题

    bootstrap的日期插件datetimepicker在chrome中会出现掉下来的现象,而且一直没找到原因,下载最新版的插件直接在各个浏览器中都会掉下来, 问题一直解决不了,转而换其他插件 htt ...

随机推荐

  1. 打印出所有的 "水仙花数 ",所谓 "水仙花数 "是指一个三位数,其各位数字立方和等于该数本身。例如:153是一个 "水仙花数 ",因为153=1的三次方+5的三次方+3的三次方。

    ---恢复内容开始--- ---恢复内容结束---

  2. 纯css实现照片墙3D效果

    每张照片都有美丽的故事.美好的回忆.家居中的照片墙则帮你展现出这些承载着家庭重要记忆的照片,除了用画框装饰照片挂在墙上外,照片墙还可以演变为手绘照片墙.也经常在网上看到一些关于照片墙的特效案例,决定自 ...

  3. Java 使用 JRegistry-1.8.1 读取和设置 windows 注册表

    在一个监控相关的Java项目中,需要读取windows系统的注册表,搜索到使用 JRegistery 可以解决.代码如下: /** * @author digdeep@126.com */ publi ...

  4. mysql workbench EER model 乱码

    如图所示: 解决办法: Edit-->perference...-->Apperance  如下图

  5. 比较TFS与SVN,你必须知道的10点区别

      相比SVN,对于TFS的优点我有以下几点看法,供大家参考: 1. 总体比较: TFS是一个应用软件生命周期管理(ALM)软件,是一个软件研发平台产品,其功能覆盖了软件研发过程中的所有环节(包括源代 ...

  6. 《大转换》,计算会像电力一样变成基础设施,基本是作者10年前写的《IT不再重要》的修订版,3星。

    本书英文版是2014年出的,基本是作者2004年的<IT不再重要>的修订版,还是在说<IT不再重要>的那个主题:计算会想电力一样变成技术设施,只需要按需购买. 以下是书中一些观 ...

  7. 记一次惨痛的线上bug

    讲述背景,刚入职新公司2个月的时候,接手一个红包系统.资历尚浅,对业务也不是很熟悉.公司开发新的平台,需要使用红包功能来进行推广,按照产品的需求,进行开发...然而,问题就出在这里,红包接口比较陈旧, ...

  8. R语言学习笔记(一)

    1.不同的行业对数据集(即表格)的行和列称谓不同,统计学家称其为观测(observation)和变量(variable): 2.R语言存储数据的结构: ①向量:类似于C语言里的一位数组,执行组合功能的 ...

  9. (四)装饰模式-C++实现

    动态地给对象添加一些额外的职责.就功能来说,装饰模式相比派生子类更为灵活. 当需要改进类的某个功能,而不是该类创建的全部对象时,可以使用这种设计模式. 装饰模式中有四种角色; 1.抽象组件:我们需要改 ...

  10. NOI 2002 营业额统计 (splay or fhq treap)

    Description 营业额统计 Tiger最近被公司升任为营业部经理,他上任后接受公司交给的第一项任务便是统计并分析公司成立以来的营业情况. Tiger拿出了公司的账本,账本上记录了公司成立以来每 ...