Question

我想尝试一个小技巧来提高我网站的跳出率。当用户将光标从页面顶部移动到前5px时，我想他想离开页面，所以我想给他一个带搜索框或相关文章的模态。

所以我们在这里：

$(document).ready(function(){
$( "#test" ).hover(function() {
        //alert("testing the mouseover");
        return false;
});  
});

#test是我正在讨论的页面顶部的5px div的ID。

问题是我不知道如何用我的bootstrap模态替换警报。

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Answer 1

试试这个：

 $(document).ready(function(){
    $( "#test" ).hover(function() {
           $('.modal').modal({
        show: true
    });
  });  
});

JSFiddle

Answer 2

我会在你的模态上添加一个id，然后用它代替你的警告

$('#modalid').modal('show');

您也可以按班级进行此操作，但我不确定您列出的任何课程是否对此特定模式而言是唯一的

Answer 3

首先，你需要给你的模态一个id，然后触发它在所需的悬停（现在你的警报）上打开。 Bootstrap有一些函数可以在模态上手动调用，you can read more about them on this post.

关于jquery悬停函数的模态

3 个答案: