CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrap
crixi
crixi

Reputation: 159

Modal on jquery hover function

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>

Upvotes: 4

Views: 38270

Answers (3)

Peter Noble
Peter Noble

Reputation: 685

Try this:

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

JSFiddle

Upvotes: 7

pmcneil18
pmcneil18

Reputation: 31

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.

Upvotes: 1

Jacob
Jacob

Reputation: 920

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

Upvotes: 1

Related Questions