title: How to prevent page refresh before a user has selected a button on a dialog box?
body: <p>My web app is listening out for a page refresh.</p>
  
  <p>I am attempting this by doing the following:</p>
  
  <pre><code>window.onbeforeunload = dialogBox;
  </code></pre>
  
  <p>The idea is to display a dialog box in order to prevent the page from refreshing until the user has made a choice from selecting either of the two buttons which determines whether they continue with the refresh or cancel the refresh.</p>
  
  <p>Unfortunately the page displays the dialog box for a brief second and then continues with the refresh. Is there anyway that I can use 'onbeforeunload' to prevent the page from continuing with a refresh and show my dialog box?</p>
  
  <p>Is it impossible to achieve using 'onbeforeunload'?</p>
  
  <p>The code for my dialog box:</p>
  
  <pre><code>function dialogBox()
  {
      $("#dialog").html("");
      $("#dialog").append("There appears to be some unsaved changes");
      $( function() {
          $( "#dialog" ).dialog({
              modal: true,
              buttons: {
                  Cancel: function() {
                      $(this).dialog( "close" );
  
                  },
  
                  "Save": function() {
  
                  },
              },
          })
      });
  }
  </code></pre>
  
  <p>Thank you all for your time.</p>
  
  <p>Edit: I don't want to prevent a user from refreshing. Rather than display the generic pop-up box that appears when using onbeforeunload, I want to display a custom dialog box by calling a function which generates that. I am somewhat able to display that for a split second, and not permanently until someone has made a selection. That selection should then either continue with the refresh or half it entirely by selecting 'Cancel'.</p>
  
  <p>If it helps, I am using Google Chrome as my web browser of choice.</p>