title: Modal on jquery hover function
body: <p>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.</p>
  
  <p>So here we are:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
  $( "#test" ).hover(function() {
          //alert("testing the mouseover");
          return false;
  });  
  });
   </code></pre>
  </div>
  </div>
  
  <code>#test</code> is the id of that 5px div from the top of the page that I was talking about.</p>
  
  <p>The problem is that I don't know how to replace the alert with my bootstrap modal.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"&gt;
    &lt;div class="modal-dialog modal-sm"&gt;
      &lt;div class="modal-content"&gt;
        ...
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>