如何自定义注销警告？

Question

因此，我将以下代码用于注销：

<%= link_to "log out", destroy_user_session_path, method: :destroy, data: {confirm: "Are you sure you want to log out?"} %>

但是标准的确认提示非常难看。 我该如何自定义呢？

这里的任何帮助将是巨大的！

Answer 1

标准自定义弹出一个“警报”框。 而且您无法设置警报框的样式。 但是您可以将模式与bootstrap或jquery一起使用，并使用触发模式onclick的javascript 。

使用jquery-ujs很容易，您只需要

$.rails.confirm = function(message) { return myConfirmDialog(message); };

有关实现，请参见本文 。

如果不起作用，则需要重写rails.allowAction。

$.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');
};

$.rails.showConfirmDialog = function(link) {
  var html;
  html = "<div id='dialog-confirm' title='Are you sure you want to delete?'></div>";
  return $(html).dialog({
    resizable: false,
    modal: true,
    buttons: {
      OK: function() {
        $.rails.confirmed(link);
        return $(this).dialog("close");
      },
      Cancel: function() {
        return $(this).dialog("close");
      }
    }
  });
};

假设您使用jQueryUI。 如果使用Bootstrap，请尝试以下要点 ，（它的咖啡脚本，但是您可以用JS重新编写）

================================================== =================

关于样式问题，如果您使用的是rails 4 *，则需要使用jquery-ui模块。

像： //= require jquery.ui.all

和

/*
 *= require jquery.ui.core
 *= require jquery.ui.theme
 */

分别在application.js和application.css中。 更多细节在这里 。

如果您使用的是3.1，那么您可能需要在Gemfile中使用jquery-rails和jquery-ui-rails，因为我使用了jquery-ui-dialog语法，所以它不应该显示空白对话框。

如果仍为空白（不应该这样），则可以在#dialog-confirm添加一些CSS，尝试进行调试，查看模式是否为jquery-ui的，也许您没有样式表。