如何自定義注銷警告？

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的，也許您沒有樣式表。