Bootstrap popover 关闭功能在 iphone 中不起作用
Posted
技术标签:
【中文标题】Bootstrap popover 关闭功能在 iphone 中不起作用【英文标题】:Bootstrap popover dismiss function not working in iphone 【发布时间】:2016-11-22 09:15:35 【问题描述】:有两个按钮“按钮 1”用于显示弹出框,“按钮 2”用于外部链接。为“按钮 1”添加了一些自定义 jquery,以当我们点击身体上的任何位置时关闭弹出框,但它在 iPhone 上不起作用(仅在点击同一个按钮时才会关闭在 iPhone 中)
$(document).ready(function ()
$("body").tooltip(
selector: "a[data-toggle='tooltip']",
container: "body"
)
.popover(
selector: "a[data-toggle='popover']",
container: "body",
html: true
);
);
$('body').on('click', function (e)
$('a[data-toggle="popover"]').each(function ()
if(!$(this).is(e.target) &&
$(this).has(e.target).length === 0 &&
$('.popover').has(e.target).length === 0)
$(this).popover('hide');
);
);
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container" style="width:400px; height:400px; background:#000;padding-top:50px;">
<a data-placement="top" role="button" class="btn btn-danger" data-toggle="popover" data-content="Popover" data-original-title="" title=""> Button1 </a>
<a class="btn btn-danger" href="http://facebook.com" target="_blank">Button2</a> </div>
【问题讨论】:
【参考方案1】:“body”标签在 iphone 上不起作用,我在 body 中添加了一个类。现在它的工作:
$(document).ready(function ()
$("body").tooltip(
selector: "a[data-toggle='tooltip']",
container: "body"
)
.popover(
selector: "a[data-toggle='popover']",
container: "body",
html: true
);
);
$('.bodyClass').on('click', function (e)
$('a[data-toggle="popover"]').each(function ()
if(!$(this).is(e.target) &&
$(this).has(e.target).length === 0 &&
$('.popover').has(e.target).length === 0)
$(this).popover('hide');
);
);
【讨论】:
以上是关于Bootstrap popover 关闭功能在 iphone 中不起作用的主要内容,如果未能解决你的问题,请参考以下文章
如何在 Bootstrap 4 popover 事件中获取数据属性
使用 bootstrap 3 popover 内表未显示在按钮顶部
如何在 Angular2 中使用 Bootstrap Popover