title: Javascript: show Twitter-Bootstrap modal before reload page
body: <p>I'm trying to show a modal (with a message and the confirm button) before page reload. </p>
  
  <p>I have to check an array: if it is empty I do the refresh, If it's not I want to show the modal and ask to the user if want to reload. </p>
  
  <p>I tried this code:</p>
  
  <pre><code>$(window).bind('beforeunload', function(){
              if(_pendent_annotations.length &gt; 0){
                  $('#change_document').modal('show');
                  $("#change_doc_button").click(function(){
                                  location.reload();
                  });
                  return false;       
              }
  
          });
  </code></pre>
  
  <p>The problem is that on reload it shows an <code>alert</code> with the message:</p>
  
  <blockquote>
    <p>"Are you sure you want to navigate away from this page?</p>
    
    <p>false"</p>
  </blockquote>
  
  <p>Then I can choose to leave or to stay, if I choose to leave it reloads if I choose to stay it shows my <code>modal</code>. </p>
  
  <p>How can I avoid the alert and only show my modal to make the user choose?</p>
  
  <p>Thanks</p>