jQuery deferredを使い、javascriptの confirm をカスタマイズ

jQuery(function($){
  var site = {};
  site.confirmHtml = $('#js-confirm')[0].outerHTML;
  $('#js-confirm').remove();

  site.customConfirm = function(textHtml) {
    var d = new $.Deferred;
    $('body').append(site.confirmHtml);
    var $self = $('#js-confirm');
    $self.find('.parts-text')[0].innerHTML = textHtml;
    $self.fadeIn(200);
    $self.on('click', '.confirm-no, .cover', function() {
      d.reject('no');
      selfRemove();
    });
    $self.on('click', '.confirm-yes', function() {
      d.resolve('yes');
      selfRemove();
    });
    function selfRemove() {
      $self.stop().fadeOut(200, function(){
        $self.remove();
      });
    }
    return d.promise();
  }
  $(function() {
    $('#btn').on('click',function() {
      var con = site.customConfirm('「はい」を押して下さい');
      con.then(function(result) {
        $('#demo textarea').val($('#demo textarea').val()+'「はい」を押しました。\n')
      }, function(){
        $('#demo textarea').val($('#demo textarea').val()+'キャンセルしました。\n')
      });
    });
  });
});