前言

最近在使用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. SQL Server 2012 学习笔记5

    1. 索引(Index) 索引是快速的定位和查找数据.索引分为: 聚集索引:唯一,默认主键,一般选取比较连贯的字段,聚集索引是物理排序. 非聚集索引: 并没有把数据物理排序,只是多了一个索引页(包括索 ...

  2. chrome浏览器首页被hao123劫持解决办法

    在chrome浏览器设置里面将新标签页地址改为www.baidu.com, 不过一般来说这个办法完全没用,因为我们面对的是史无前例的大流氓. 查看桌面chrome的快捷方式是否被篡改.右键快捷方式,点 ...

  3. android 设置布局横屏竖屏

    只要在AndroidManifest.xml里面配置一下就可以了.在AndroidManifest.xml的activity(需要禁止转向的activity)配置中加入android:screenOr ...

  4. C#中标准Dispose模式的实现与使用(条目17 实现标准的销毁模式)

    实现了Dispose模式与实现了IDisposable接口的区别就是:IDisposable的实现的可靠性(释放相关资源)要靠编程人员来解决(你确信你从来都一直调用了Dispose(Close)方法吗 ...

  5. SqlServer时间格式化

    最近用的SqlServer比较多,时间格式化老是忘记,现整理如下:(来源于网上,具体来源地址忘记了,归根到底MSDN吧) SELECT CONVERT(varchar(50), GETDATE(), ...

  6. 一:Shell基础

    1.shell概述  shell是一个命令行解释器,它为用户提供了一个向Linux内核发送请求以便运行程序的界面系统级程序,用户可以用shell来启动,挂起,停止甚至是编写一些程序:  shell还是 ...

  7. Linux vim(4)

    vim相对于vi做了很多的提升: -VIM支持多集撤销 -VIM可以跨平台运行 —VIM支持语法高亮 -VIM支持图形界面 vim三大模式: command mode vi进入时的默认模式 esc进入 ...

  8. plain framework 1 参考手册 入门指引之 简明教程

    简明教程 简单的例子 实现代码 简单的例子 如果你已经下载好整个框架的源码,那么你可以在这里找到应用的例子: plainframework/applications/pf_simple 如果你在win ...

  9. 第8章 用户模式下的线程同步(2)_临界区(CRITICAL_SECTION)

    8.4 关键段(临界区)——内部也是使用Interlocked函数来实现的! 8.4.1 关键段的细节 (1)CRITICAL_SECTION的使用方法 ①CRITICAL_SECTION cs;   ...

  10. AC日记——紧急措施 openjudge 1.7 22

    22:紧急措施 总时间限制:  1000ms 内存限制:  65536kB 描述 近日,一些热门网站遭受黑客入侵,这些网站的账号.密码及email的数据惨遭泄露.你在这些网站上注册若干账号(使用的用户 ...