引导弹出窗口不会在移动设备中关闭 [英] bootstrap popover wont close in mobile
问题描述
我已将我的 html 简化为我在此处发布的代码.首先，我有一个空的 p 标签.然后是一个包含 popover-anchor 的 table-tag.然后是另一个空的 p 标签.当我在桌面上时，单击锚点并显示弹出窗口后，无论我单击页面上的何处，弹出窗口都将关闭.但是，当我使用移动设备(Safari iOS)时，只有在页面末尾单击/点击时，弹出窗口才会关闭.这意味着，最后一个空 p-tag 之后的区域.我研究了很多.我不确定，但也许可能是关于听点击"而不是点击"?我真的不明白为什么点击 body 内部的外部标签会使弹出框消失.
I have simplified my html to the code I post here. First I have an empty p-tag. Then a table-tag containing a popover-anchor. And then another empty p-tag. When I am on Desktop, after I click the anchor and the popup displays, wherever I click on the page, the popover will be closed. However, when I am on mobile (Safari iOS), the popover will only close if I click/tap at the end of the page. Which means, the area after the last empty p-tag. I have researched a lot. Im not sure, but maybe could be about listening for "tap" instead of "click"? What I really dont understand is why click outside tags inside body makes the popover to disappear.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
<link href="/components/bootstrap/dist/css/bootstrap-theme.css" rel="stylesheet">
<script type="text/javascript" src="/components/jquery/dist/jquery.js"> </script>
<script type="text/javascript" src="/components/bootstrap/dist/js/bootstrap.js"></script>
<script>
$(function () {
$('[data-toggle="popover"]')
.on('click',function(e){
e.preventDefault();
})
.popover();
})
</script>
</head>
<body>
<p style="background-color:green"> </p>
<table border=1 cellspacing=2 cellpadding=2 >
<tr>
<td><b>Lowest</b></td>
</tr>
<tr>
<td>
<a
data-html="true" data-trigger="focus" tabindex="0" role="button" href="#" data-toggle="popover" data-placement="right"
data-content="<div>This is HTML</div>">
one
</a>
</td>
</tr>
</table>
<p style="background-color:yellow"> </p>
</body>
</html>
推荐答案
问题是在 Iphone 上点击 body 元素不起作用.尝试编写一个简单的 html 页面，其中包含以下代码:$(函数(){$('body').on('click touchstart', function (e) {警报(点击")；});});嗯，在 Iphone 上不会有任何警报.所以专注于此，我发现有一些解决方法.一种解决方法是在您想要点击的元素上设置一个 css-directive(在我的例子中是所有的 body-tag，所以在那个 cse 中，您可能想要放置一些包含所有 body-content 的包装器).该指令很简单:游标:指针；
The problem is that on Iphone onclick on the body element doesnt work. Try to code a simple html-page where you have this code: $(function () { $('body').on('click touchstart', function (e) { alert("clicked"); }); }); Well, on Iphone there will not be any alert. So focusing on that, I discovered that there are a few workaround to this. One workaround is to have a css-directive on the element you want to be clickable (in my case all the body-tag, so in that cse you may want to put some wrapper envolping all the body-content). The directive is simply: cursor:pointer;
由于您可能不希望所有元素都显示指针，因此您可能需要检测客户端是否为 iOS.
As you probably dont want all the elements to show the pointer, you probably will need to detect if the client was iOS.
这篇关于引导弹出窗口不会在移动设备中关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
