前言

最近在使用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. JQuery插件:遮罩+数据加载中。。。(特点:遮你想遮,罩你想罩)

    在很多项目中都会涉及到数据加载.数据加载有时可能会是2-3秒,为了给一个友好的提示,一般都会给一个[数据加载中...]的提示.今天就做了一个这样的提示框. 先去jQuery官网看看怎么写jQuery插 ...

  2. zookeeper barrier和queue应用实例

    package org.windwant.zookeeper; import org.apache.zookeeper.CreateMode; import org.apache.zookeeper. ...

  3. spring listener监听器

    1.Listener的定义与作用 监听器Listener就是在application,session,request三个对象创建.销毁或者往其中添加修改删除属性时自动执行代码的功能组件. Listen ...

  4. 【SQL篇章--CREATE TABLE】

    [SQL篇章][SQL语句梳理 :--基于MySQL5.6][已梳理:CREATE TABLE][会坚持完善] SQL : 1. Data Definition Statements: 1.3 CRE ...

  5. jquery最常用的几个方法。

    jquery使用手册:http://www.eduyo.com/doc/jquery/cheatsheet.html addClass 样式: <style> .textRed { col ...

  6. 今天说一下 Group by 这个东西

    group by 这个关键字,这个语句太平凡了~基本上只要有报表的地方,就会有它的身影. 常规用法就是 INSERT INTO #TypeValue ( TypeID, Col2 ) , N , N ...

  7. 网友转发的很全的 LISTCTL 控件使用的说明

    作者:lixiaosan 时间:04/06/2006 以下未经说明,listctrl默认view 风格为report 相关类及处理函数 MFC:CListCtrl类 SDK:以 "ListV ...

  8. 解决Python2.7的UnicodeEncodeError: 'ascii' codec can’t encode异常错误

    import sys reload(sys) sys.setdefaultencoding('utf-8') 好了,通过上面短短的三行,我们算是很好的解决了这个问题了,同样的方式也可以应用到Unico ...

  9. ELF Format 笔记(二)—— ELF Header

    ilocker:关注 Android 安全(新入行,0基础) QQ: 2597294287 以 32 位的 ELF header 数据结构为例: #define EI_NIDENT 16 typede ...

  10. KVM 介绍(6):Nova 通过 libvirt 管理 QEMU/KVM 虚机 [Nova Libvirt QEMU/KVM Domain]

    学习 KVM 的系列文章: (1)介绍和安装 (2)CPU 和 内存虚拟化 (3)I/O QEMU 全虚拟化和准虚拟化(Para-virtulizaiton) (4)I/O PCI/PCIe设备直接分 ...