Question

所以我使用以下代码进行注销：

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

但标准确认提示非常难看。我该如何定制？

这里的任何帮助都会很棒！

Answer 1

标准自定义会弹出一个＆＃34;警告＆＃34;框。并且您无法设置警报框的样式。但是你可以使用带有bootstrap或jquery的模态，并使用javascript来触发模态 onclick。

使用jquery-ujs很简单，你只需要

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

请参阅此article以了解实施情况。

如果它不起作用，那么你需要覆盖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尝试这个gist，（它的coffeescript，但你可以用JS重写）

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

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

像： //= require jquery.ui.all

和

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

分别在application.js和application.css中。更多详情here。

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

如果仍然是空白（它不应该是），你可以向#dialog-confirm添加一点css，尝试调试，看看模态是否是jquery-ui＆s;并且你可能不会＃ 39;没有样式表。

如何自定义注销警告？

1 个答案: