Vex Dialog — Confirm Before Navigating

HTML

<a href="http://example.com" class="confirm">Example</a>

CSS

</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://github.hubspot.com/vex/js/vex.js"></script>
<script src="http://github.hubspot.com/vex/js/vex.dialog.js"></script>
<link href="http://github.hubspot.com/vex/css/vex.css" rel="stylesheet" />
<link href="http://github.hubspot.com/vex/css/vex-theme-default.css" rel="stylesheet" />
<script>vex.defaultOptions.className = 'vex-theme-default';</script>
<style>

JavaScript

$('a.confirm').click(function(event){
    event.preventDefault();
    vex.open({
      content: '<div>Content</div>',
      afterOpen: function($vexContent) {
        setTimeout("vex.close()", 1000);
        return $vexContent.append($el);
      },
      afterClose: function() {
        return console.log('vexClose');
      }
    });
    
});