Modal on jquery hover function

Question

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.

So here we are:

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

#test is the id of that 5px div from the top of the page that I was talking about.

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>

Peter Noble · Accepted Answer · 2015-02-20T19:29:27.223

7

Try this:

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

JSFiddle

edited Feb 20 '15 at 19:29

answered Feb 20 '15 at 19:24

Peter Noble

675
10
21

hi, i tried this and it doesn't work. The content of the modal will be displayed on the same page. May I know what is the version of the Jquery you are using for this example? and Is bootstrap necessary in this case?Thank you! – hao Jun 23 '17 at 09:45
$(selector).hover(function(){ $(modalSelector).modal('show') }); **Note :** selector - id or class of element to show , modalSelector - Id or class of modal to show – Aikansh Mann Jul 31 '19 at 06:05

score 1 · Answer 2 · answered Feb 20 '15 at 19:22

1

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

$('#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

answered Feb 20 '15 at 19:22

Jacob

920
6
19

score 1 · Answer 3 · edited May 23 '17 at 11:58

1

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.

edited May 23 '17 at 11:58

Community

1
1

answered Feb 20 '15 at 19:23

pmcneil18

31
3

Modal on jquery hover function

3 Answers3