jQuery jquery悬停功能上的模态

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/28636560/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 16:30:02  来源:igfitidea点击:

Modal on jquery hover function

jqueryhtmltwitter-bootstrap

提问by crixi

I want to try a small trick to improve the bounce rate from my website. When the user is moving the cursor on the first 5px from the top of the page I suppose that he want to leave the page so I want to give him a modal with a search box or with some related articles.

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

So here we are:

所以我们在这里:

$(document).ready(function(){
$( "#test" ).hover(function() {
        //alert("testing the mouseover");
        return false;
});  
});
 
#test#test是我正在谈论的页面顶部的那个 5px div 的 id。

The problem is that I don't know how to replace the alert with my bootstrap modal.

问题是我不知道如何用我的引导模式替换警报。

<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>

回答by Peter Noble

Try this:

尝试这个:

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

JSFiddle

JSFiddle

回答by Jacob

I would put an id on your modal and then do this in place of your alert

我会在你的模态上放一个 id,然后用这个代替你的警报

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

You could also do this by class but I am not sure if any of the classes you have listed are unique to this specific modal

您也可以按班级执行此操作,但我不确定您列出的任何班级是否是该特定模式所独有的

回答by pmcneil18

First you need to give your modal an id, then trigger it to open on the desired hover (where your alert is now). Bootstrap has a few functions that can be called manually on modals, you can read more about them on this post.

首先,您需要给您的模态一个 id,然后触发它在所需的悬停(您的警报现在所在的位置)上打开。Bootstrap 有一些可以在模态上手动调用的函数,你可以在这篇文章中阅读更多关于它们的信息。