Overwrite $.rails.confirm call a dialog component.

confirm-rails.js

$.rails.allowAction = function(link){
   if(link.attr('data-confirm')){
     $.rails.showConfirm(link);
     return false;
   }else{
     return true;
   }
};

$.rails.confirmed = function(link){
  link.removeAttr('data-confirm');
  link.trigger('click.rails');
};

$.rails.showConfirm = function (link){
  var option = {
    title: "Are you sure Mr. President?",
    content: "<p>" + $(link).data("confirm") + "</p>",
    confirm: {
      text: "Just do it!",
      callback: function(){
        $.rails.confirmed(link);
      }
    }
  };
  return new Modal(option);
};


var Modal = function(option){
  this.init(option);
  return this;
};
Modal.prototype = {
  init: function(option){
    this.option = option;
    this.option.confirm = option.confirm || {text: "Confirm"};
    if(typeof option.confirm === "string"){
      this.option.confirm = {
        hide: false,
        text: option.confirm
      };
    }
    this.option.cancel = option.cancel || {text: "Cancel"};
    if(typeof option.cancel === "string"){
      this.cancel = {
        hide: false,
        text: option.cancel
      };
    }
    console.log(option);
    var $body = $("body");
    $body.append("<div class='backdrop'></div>");
    $body.append("<div class='modal-box'>" +
      "<div class='modal-title'>"+ option.title +"<div class='modal-close'>&times;</div></div>" +
      "<div class='modal-body'>" + option.content + "</div>"+
      "<div class='modal-footer'>" +
        "<button class='button modal-cancel'>"+ (option.cancel.text || "Cancel") +"</button>" +
        "<button class='button modal-confirm'>" + (option.confirm.text || "Confirm") + "</button>" +
      "</div>" +
    "</div>");
    this.setup();
    return this;
  },
  setup: function(){
    var self = this;
    var $template = $(".modal-box");
    self.template = $template;
    window.setTimeout(function(){
      $template.addClass("show");
      $(".backdrop").addClass("show");
    }, self.option.delay || 300);
    $template.find(".modal-close").click(function(){
      self.close();
    });
    self.option.confirm.callback = self.option.confirm.callback || function(){};
    self.option.cancel.callback = self.option.cancel.callback || function(){};
    self.template.find(".modal-confirm").click(self.option.confirm.callback.bind(self));
    self.template.find(".modal-cancel").click(self.option.cancel.callback.bind(self));
    self.template.find(".modal-close, .modal-cancel").click(function(){self.close();});
    if (!self.option.stay){self.template.find(".modal-confirm").click(function(){self.close();});}
  },
  show: function(){
    this.template.addClass("show");
  },
  close: function(){
    var self = this;
    self.template.removeClass("show");
    $(".backdrop").removeClass("show");
    window.setTimeout(function(){
      self.template.remove();
      $(".backdrop").remove();
    }, self.option.delay || 300);
  }
};