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 ...
随机推荐
- SQL Server 2012 学习笔记5
1. 索引(Index) 索引是快速的定位和查找数据.索引分为: 聚集索引:唯一,默认主键,一般选取比较连贯的字段,聚集索引是物理排序. 非聚集索引: 并没有把数据物理排序,只是多了一个索引页(包括索 ...
- chrome浏览器首页被hao123劫持解决办法
在chrome浏览器设置里面将新标签页地址改为www.baidu.com, 不过一般来说这个办法完全没用,因为我们面对的是史无前例的大流氓. 查看桌面chrome的快捷方式是否被篡改.右键快捷方式,点 ...
- android 设置布局横屏竖屏
只要在AndroidManifest.xml里面配置一下就可以了.在AndroidManifest.xml的activity(需要禁止转向的activity)配置中加入android:screenOr ...
- C#中标准Dispose模式的实现与使用(条目17 实现标准的销毁模式)
实现了Dispose模式与实现了IDisposable接口的区别就是:IDisposable的实现的可靠性(释放相关资源)要靠编程人员来解决(你确信你从来都一直调用了Dispose(Close)方法吗 ...
- SqlServer时间格式化
最近用的SqlServer比较多,时间格式化老是忘记,现整理如下:(来源于网上,具体来源地址忘记了,归根到底MSDN吧) SELECT CONVERT(varchar(50), GETDATE(), ...
- 一:Shell基础
1.shell概述 shell是一个命令行解释器,它为用户提供了一个向Linux内核发送请求以便运行程序的界面系统级程序,用户可以用shell来启动,挂起,停止甚至是编写一些程序: shell还是 ...
- Linux vim(4)
vim相对于vi做了很多的提升: -VIM支持多集撤销 -VIM可以跨平台运行 —VIM支持语法高亮 -VIM支持图形界面 vim三大模式: command mode vi进入时的默认模式 esc进入 ...
- plain framework 1 参考手册 入门指引之 简明教程
简明教程 简单的例子 实现代码 简单的例子 如果你已经下载好整个框架的源码,那么你可以在这里找到应用的例子: plainframework/applications/pf_simple 如果你在win ...
- 第8章 用户模式下的线程同步(2)_临界区(CRITICAL_SECTION)
8.4 关键段(临界区)——内部也是使用Interlocked函数来实现的! 8.4.1 关键段的细节 (1)CRITICAL_SECTION的使用方法 ①CRITICAL_SECTION cs; ...
- AC日记——紧急措施 openjudge 1.7 22
22:紧急措施 总时间限制: 1000ms 内存限制: 65536kB 描述 近日,一些热门网站遭受黑客入侵,这些网站的账号.密码及email的数据惨遭泄露.你在这些网站上注册若干账号(使用的用户 ...