如何在Rails中设置Flash消息的超时时间

Question

目前我使用Devise gem来实现标准的成功/失败等Flash消息。 我已经添加了手动关闭消息的选项，并通过close类使用了一些Bootstrap功能。 下面是一个小片段。

{ 
  <a class="close" data-dismiss="alert">&#215;</a>
  <%= content_tag :div, msg, :id => "flash_#{name}" %>
}

我希望能够创建一个超时时间选项，在5秒后自动关闭警报消息。不确定在Rails中是否有简单的方法实现。

谢谢。

- Stuart C

---

JavaScriptзҡ„setTimeoutж–№жі•жҳҜдҪ зҡ„еҘҪжңӢеҸӢгҖӮ - HungryCoder

Answer 1

如果您在同一页面中已经加载了jQuery，那么这将对您起作用

<div id="flash">
  <a class="close" data-dismiss="alert">&#215;</a>
  <%= content_tag :div, msg, :id => "flash_#{name}" %>
</div>

<script type="text/javascript">
$(document).ready(function(){
  setTimeout(function(){
    $('#flash').remove();
  }, 5000);
 })
</script>

- HungryCoder

---

这个应该放在哪里？我试过把它加到我的 application.js 和 _header.html.erb 中，但是没有起作用。只是提供一些信息，我已经在我的应用程序中使用了 jQuery，感谢 //= require jquery //= require jquery.turbolinks //= require jquery_ujs 在 application.js 中的支持。我有什么遗漏吗？ - Thibaud Clement

虽然不是 JavaScript 的理想位置，但你可以将整个片段放在布局文件中。我通常会将标记放在一个 partial 中，然后将其包含在布局中（例如 application.html.*），然后将 JavaScript 放在一个 JS 文件中，并将其包含在 JavaScript 清单文件中。 - HungryCoder

Answer 2

在Rails 6中使用原生JavaScript（将代码放置在app/javascript/packs/application.js中），我使用以下代码来淡化一个带有'.notification'类的闪现消息。

首先，在HTML中添加一个notification类。然后，在CSS中，将.notification的不透明度设置为1，并设置transition为ease-in-out。接着，在JS中，将.fade类添加到.notification中，这会将不透明度设置为0。

JS

window.addEventListener("turbolinks:load", () => {
  hideNotice();
});

function hideNotice() {
  const notification = document.querySelector('.notification')
  if (notification) {
    setInterval(function() {
      notification.classList.add('fade');
    }, 5000);
  }
}

CSS

.notification {
  opacity: 1;
  transition: opacity 0.4s ease-in-out;
}

.notification.fade {
  opacity: 0;
}

- Joe McCann

---

谢谢！这个对我有用。有没有办法让它渐隐而不是立即消失？ - Felipe Cerda

@FelipeCerda 是的！请查看编辑。这很简单，只需添加CSS类而不是设置显示为“none”。 - Joe McCann

Answer 3

1. 确保你的 div 元素有一个 alert 类。
2. 将以下代码添加到你的 application.js 或其他 .js 文件中：

$(document).on('turbolinks:load', function() {
  setTimeout(function() {
    $('.alert').fadeOut();
  }, 3000);
})

看着它消失。

- Seralto