title: What is the most unobtrusive way to implement a custom 'beforeunload' dialog?
body: <p>I'm talking about a styled dialog, instead of the default 'beforeunload' dialog that can't be styled.</p>
  
  <p>See Facebook: 
  <img src="https://i.stack.imgur.com/MiFD6.png" alt="Facebook unload image"></p>
  
  <p>What is the most unobtrusive way to make this? Preferrable some script that I declare once, and magically always works.</p>
  
  <p>I'm think about something in the line of:</p>
  
  <pre><code>function showCustomDialog()
  {
      [...]
  }
  
  var unfinished = true;
  
  $('a').click(function()
  {
      if ( unfinished )
      {
          window.showCustomDialog( { originalUrl: $(this).attr('href') } );
          return false;
      }
  }
  </code></pre>
  
  <p>But I'm affraid this will break cases where i.e. a <code>&lt;a&gt;</code> element is used for triggering JS-behaviour, or where JavaScript triggers a window.location.href change.</p>
  
  <p>Is there a better, non-obtrusive way?</p>
  
  <p><strong>Extra note</strong>
  - They also got it working for the back button.</p>
  
  <p><strong>Extra note</strong> - Apparently they fall back to the default dialog when it's out of their control.</p>