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 ...
随机推荐
- C#语言基础——特殊集合
特殊集合一.stack集合栈:stack,先进后出,一个一个赋值,一个一个取值,按顺序,且没有索引属性和方法:.count 取集合内元素的个数.push() 将元素一个一个推入集合中.pop() 将元 ...
- 让你脱离google不能访问的烦恼
大陆封了google已有20多天了,给开发者带来了许多不便.只需两步让你的google可以使用: 1.设置hosts: 访问:https://git.oschina.net/kawaiiushio/m ...
- Spring boot 基于Spring MVC的Web应用和REST服务开发
Spring Boot利用JavaConfig配置模式以及"约定优于配置"理念,极大简化了基于Spring MVC的Web应用和REST服务开发. Servlet: package ...
- JDK动态代理和CGLIB的区别
Aspect默认情况下不用实现接口,但对于目标对象,在默认情况下必须实现接口 如果没有实现接口必须引入CGLIB库 我们可以通过Advice中添加一个JoinPoint参数,这个值会由spring自动 ...
- 利用PHPMailer 来完成PHP的邮件发送 #转载自:大菜鸟在云端#
利用PHPMailer 来完成PHP的邮件发送 1.首先是下载PHPMailer http://code.google.com/a/apache-extras.org/p/phpmailer/ 2.解 ...
- EF Power Tools 数据库逆向生成时T4模板修改
VS2013上使用EF Power Tools的Reverse Engineer Code First逆向生成. 发现数据库中的decimal(18, 4)字段在生成的mapping类中没有精度和小数 ...
- SQL Server 分隔字符串函数实现
在SQL Server中有时候也会遇到字符串进行分隔的需求.平时工作中常常遇到这样的需求,例如:人员数据表和人员爱好数据表,一条人员记录可以多多人员爱好记录,而往往人员和人员爱好在界面展示层要一并提交 ...
- PostgreSql常用脚本
添加表字段 ALTER TABLE public.university ADD COLUMN "Province" character varying(10); COMMENT O ...
- php cli方式下获取服务器ip
(未整理....) (1)php cli方式下获取服务器ip [php] function getServerIp(){ $ss = exec('/sbin/ifconfig et ...
- Install pyodbc in OpenSUSE
Install pyodbc in OpenSUSE: Install unixODBC-2.3.2 ./configure --prefix=/usr/local/unixODBC --enable ...