前言

最近在使用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 checkbox操作

    一.通过选择器选取CheckBox: 1.给CheckBox设置一个id属性,通过id选择器选取: <input type="checkbox" name="myB ...

  2. 数据库 SQL Server 到 MySQL 迁移方法总结

    最近接手一起老项目数据库 SQL Server 到 MySQL 的迁移.因此迁移前进行了一些调查和总结.下面是一些 SQL Server 到 MySQL 的迁移方法. 1. 使用 SQLyog 迁移 ...

  3. Linux IPC udp/ip socket 编程

    模型 #include <unistd.h> #include <sys/types.h> #include <sys/socket.h> #include < ...

  4. Linux系统管理命令之权限管理

    对于一个目录来说,x权限:可以cd进去 对于目录: 读:看 执行:进去 写:写操作 rw权限没有意义 umask 022     特殊权限: suid sgid 2种情况:对于文件:类似于suid对于 ...

  5. java enum(枚举)的使用

    在实际编程中,往往存在着这样的“数据集”,它们的数值在程序中是稳定的,而且“数据集”中的元素是有限的. 例如星期一到星期日七个数据元素组成了一周的“数据集”,春夏秋冬四个数据元素组成了四季的“数据集” ...

  6. 客户访问站点将bbs/链接 跳转至forum/链接下的两种方式

    显性 302 暂时重定向跳转 server { listen 80 ; server_name localhost; index index.html index.htm index.php; roo ...

  7. IE自动跳转到标准模式

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

  8. MIT 6.824 : Spring 2015 lab2 训练笔记

    源代码参见我的github:https://github.com/YaoZengzeng/MIT-6.824 Lab 2:Primary/Backup Key/Value Service Overvi ...

  9. 怎样用ZBrush中的shadowbox创建物体

    ZBrush一直以方便著称业内各领域,模型师不需要在多个软件中编辑塑造模型,而在ZBrush用shadowbox创建物体的流程,在Tool面板上的Geometry子面板中,4.0版本引入了shadow ...

  10. 3-2-1-0-GO

    正式开始第3份工作,入职第2天,午饭后与Team Leader谈了1个多小时,很有收获. 首先,不同的公司有不同的企业文化和规章制度,需要尊重且入乡随俗,尽快学习并适应,争取早日融入公司和团队当中去, ...