Replace Rails 4 confirmation/prompts with a toast message from Dogfalo Materialize CSS. Regular repo - https://github.com/Dogfalo/materialize Sass Gem - https://github.com/mkhairi/materialize-sass Website - http://materializecss.com/

_materializecss-rails-confirm.coffee

$ ->
  $.rails.allowAction = (link) ->
    return true  unless link.attr("data-confirm")
    $.rails.showConfirmDialog link
    false

  $.rails.confirmed = (link) ->
    link.removeAttr "data-confirm"
    link[0].click() # force click on element directly

  $.rails.showConfirmDialog = (link) ->
    html = undefined
    message = undefined
    message = link.attr("data-confirm")
    html = "<div id=\"modal1\" class=\"modal\" style=\"z-index: 1003; display: block; opacity: 1; transform: scaleX(1); top: 10%;\"> <div class=\"modal-content\"><h4>" + message + "</h4></div><div class=\"modal-footer\"><a class=\"modal-action modal-close waves-effect waves-red btn-flat close\">Cancel</a><a class=\"modal-action modal-close waves-effect waves-green btn-flat confirm\">OK</a></div></div>"
    $("body").append html
    $("#modal1").modal complete: ->
      $("#modal1").remove()

    $("#modal1 .close").on "click", ->
      $("#modal1").modal('close')

    return $("#modal1 .confirm").on("click", ->
      $.rails.confirmed link
    )

_materializecss-rails-confirm.js

$(function() {
  $.rails.allowAction = function(link) {
    if (!link.attr("data-confirm")) {
      return true;
    }

    $.rails.showConfirmDialog(link);
    return false;
  };

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

  return $.rails.showConfirmDialog = function(link) {
    var html, message;
    html = void 0;
    message = void 0;
    message = link.attr("data-confirm");
    html = "<div id=\"modal1\" class=\"modal\" style=\"z-index: 1003; display: block; opacity: 1; transform: scaleX(1); top: 10%;\"> <div class=\"modal-content\"><h4>" + message + "</h4></div><div class=\"modal-footer\"><a class=\"modal-action modal-close waves-effect waves-red btn-flat close\">Cancel</a><a class=\"modal-action modal-close waves-effect waves-green btn-flat confirm\">OK</a></div></div>";
    $("body").append(html);

    $("#modal1").modal({
      complete: function() {
        return $("#modal1").remove();
      }
    });

    $("#modal1 .close").on("click", function() {
      return $("#modal1").modal('close');
    });

    return $("#modal1 .confirm").on("click", function() {
      return $.rails.confirmed(link);
    });
  };
});

Thanks!

Thanks Chris, this looks great !!

But I just have one problem, the modal does not close with the buttons (cancel or ok).

To solve it, I just change the last functions :

$("#modal1 .close").on("click", function() {
  return $("#modal1").fadeOut(function() { $(this).remove(); });
});

return $("#modal1 .confirm").on("click", function() {
  $("#modal1").fadeOut(function() { $(this).remove(); });
  return $.rails.confirmed(link);
  
});

I also made some updates to have a background and slideUp/slideDown animations if you need it :
See Updates