Question

在移动设备上遇到奇怪的问题（Chrome和Safari）。我有一个名为xyzModal的模态说法。我有一个链接打开这个模态。桌面链接仅在悬停时出现。

所以在移动设备上克服悬停效果我所做的就是始终显示链接并且悬停悬停方法

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

问题就是模态来了，并在几分之一的时间内立即消失。

如果我直接在控制台上$('#xyzModal').modal()，那么奇怪的部分就是它正常工作。此外，令人惊讶的莫代尔工作也很长。有没有人遇到过这种行为。虽然它在移动firefox中运行良好。但是不要创建一个小提琴，因为小提琴将覆盖我当前的库设置。告诉我需要搜索的方向。在这里变得非常无能为力。

提前感谢您的帮助。

Answer 1

最简单的方法是使用Bootstrap的优点＆＃39;查询类（响应地显示/隐藏元素）在桌面和移动设备之间交换两个模态，并在查询类下放置两个按钮。

这样的事情：

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
});

Bootstrap模式立即在移动链接点击时消失

1 个答案: