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>

Answer 1

Try this:

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

JSFiddle

Answer 2

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