Bootstrap模式立即在移动链接上消失单击

Question

在移动设备（Chrome和Safari）上出现奇怪的问题。 我和我一起有一个ID为xyzModal的模态说法。 我有一个打开此模式的链接。在桌面上，链接仅出现在悬停上。

因此，在移动设备上要克服悬停效果，我所做的就是始终显示链接并避免悬停方法

$('#link').hover(function(ev){
ev.preventDefault();
$('#xyzModal').modal()
});

与此相关的问题是模式出现并立即消失。

如果我直接在控制台上执行$('#xyzModal').modal()奇怪的部分是它的正常工作。 此外，对于长按链接的惊人模式工作还不错。 有没有人遇到过这种行为。尽管它在移动Firefox中工作正常。无法创建小提琴，因为小提琴将覆盖我当前的库设置。 只需告诉我需要搜索的方向即可。 在这里变得毫无头绪。

感谢您的帮助。

Answer 1

最简单的方法是使用Bootstrap良好的查询类（响应式显示/隐藏元素）在台式机和移动设备中的两个模式之间进行交换，并将两个按钮也放置在查询类下。

像这样：

HTML：

<!--BUTTONS-->
<div class="hidden-xs" id="link1">Open Modal</div>
<div class="visible-xs" id="link2">Open Modal</div>

<!--MODALS-->
<div id="xyzModal1" class="hidden-xs">
  <!--modal codes here-->
</div>

<div id="xyzModal2" class="visible-xs">
  <!--modal codes here-->
</div>

JS：

$('#link1').hover(function(){
  // place modal xyzModal1 code here
});

$("#link2").click(function() {
  // place modal xyzModal2 code here
});