引导弹出窗口不会在移动设备中关闭
bootstrap popover wont close in mobile
我已经将我的html简化为我在这里发布的代码。首先,我有一个空的p标签。然后是包含弹出框锚点的表标记。然后是另一个空的p标签。当我在桌面上时,单击锚点并显示弹出窗口后,无论我单击页面的哪个位置,弹出窗口都将关闭。但是,当我在移动设备(Safari iOS)上时,仅当我单击/点击页面末尾时,弹出窗口才会关闭。这意味着,最后一个空 p 标签之后的区域。我研究了很多。我不确定,但也许可能是关于听"点击"而不是"点击"?我真的不明白的是,为什么单击正文内的外部标签会使弹出框消失。
<!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 指令(在我的情况下是所有正文标签,因此在该 cse 中,您可能希望放置一些包含所有正文内容的包装器)。该指令很简单:光标:指针;
由于您可能不希望所有元素都显示指针,因此您可能需要检测客户端是否为 iOS。
相关文章:
- 如何打开/移动主屏幕左侧的浏览器窗口
- YouTube作为弹出窗口在桌面版本上播放,但不在移动设备上播放
- 将第二窗口移动到第二屏幕或特定屏幕
- 当移动地址栏出现/消失时,防止更改窗口高度
- 如何在缩放时获取移动浏览器窗口的宽度
- 如何在鼠标移动事件时更改图像的窗口中心和宽度
- 显示移动窗口时引导导航栏中的 atach 搜索栏
- 移动设备中的条纹支付弹出窗口
- 如何仅在窗口宽度从桌面(>1024px)更改为移动(<1025px)导航时重新加载页面
- 当窗口向上滚动时,如何使用粘性侧边栏向上移动
- jquery调整大小为移动窗口iPhone / Android
- 具有 100% 窗口高度的移动导航栏,无论内容如何
- javascript Y 滚动条在向下按钮的鼠标上移动,但窗口水平
- 使用 html/javascript 的 AIR 框架移动窗口
- 在移动屏幕中从纵向移动到横向并返回纵向时,窗口元素在垂直方向上变得不可见
- 如何使用 html 将 Windows 手机(但不是桌面窗口)重定向到移动网站
- Chrome 会在我移动窗口时隐藏我的窗口
- 在移动窗口上调整KineticJs画布的宽度大小事件
- 移动窗口时激活/停用事件
- 点击切换按钮时向下移动窗口视点