Reusable jQuery UI Dialog that creates a Deferred and returns a promise.

gistfile1.html

<div id="confirmation" title="Confirm action" style="display: none;">
  <p>Are you sure?</p>
</div>

<script>
  /* Reusable dialog with deferreds
   *
   * Example:
   * $.modalConfirmation()
   *    .then(function() { console.log('success'); })
   *    .fail(function() { console.log('failure'); })
   */
  var modalConfirmation = (function() {
    var $dialog = $('#confirmation').dialog({
      autoOpen: false,
      modal: true
    });
    var showDialog = function() {
      var def = $.Deferred();
      $dialog.dialog('option', 'buttons',
        {
          "OK": function() {
            def.resolve();
            $(this).dialog('close');
          },
          "Cancel": function() {
            def.reject();
            $(this).dialog('close');
          }
        });
      $dialog.dialog('open');
      return def.promise();
    };
    return showDialog;
  })();
</script>

Idea from http://stackoverflow.com/a/10703097/659526 plus the general idea that dialogs should be reused.

How to make general function which will work with different dialogs and custom buttons ? See my question
http://codereview.stackexchange.com/questions/52252/how-to-generalize-method-which-use-deferreds