让flash消息在rails中的同一页面中消失
几秒后我想让flash消息消失。 所以我使用这些代码：
$(function() { $('.alert').slideUp(1500); }); .alert是我添加到flash消息的引导类。
我的应用程序只通过omniauth实现了用户登录/注销function。 （使用facebook和google plus）最后列出的登录/注销代码。
当我登录时，flash消息就像我想象的那样消失了。 但是当我退出时，闪光灯并没有消失。
但是，如果我使用这些代码，此function将正常工作。 （但与我想要的略有不同）
$(function() { setInterval(function(){ $('.alert').slideUp(500); }, 1000); });
登录/退出代码：
class SessionsController "Please enter your email address." else redirect_to root_url, :notice => "Signed in!" end end def destroy reset_session redirect_to root_url, :notice => "Signed out!" end def new end def failure redirect_to root_url, :alert => "Authentication error: #{params[:message].humanize}" end end
试试这个
$(function() { setTimeout(function(){ $('.alert').slideUp(500); }, 1000); });
以前我有同样的问题，但现在通过这个解决了：
在您的代码中尝试这一点
对于此问题，建议使用toastr.js。 它提供了烘烤行为，只需进行一些更改，它就可以完美地与bootstrap和rails flash消息一起使用。 它完全可定制，易于使用，并且还具有更多优势。
1.步骤
下载toastr.css和toastr.js ，将CSS文件放在app / assets / stylesheets目录中，将JS文件放在app / assets / javascripts中 。
2.步骤
打开toastr演示webseite并根据您的需要设置烘焙消息。 将该页面上的javascript代码（不带第一行）复制到您的app / assets / javascripts / application.js 。 （对于代码样式，如果需要，可以将此代码放在新的JS文件中）。
它应该看起来像这样（值可能有点不同）：
toastr.options = { "closeButton": true, "debug": false, "newestOnTop": false, "progressBar": false, "positionClass": "toast-bottom-right", "preventDuplicates": false, "onclick": null, "showDuration": "300", "hideDuration": "1000", "timeOut": "5000", "extendedTimeOut": "1000", "showEasing": "swing", "hideEasing": "linear", "showMethod": "fadeIn", "hideMethod": "fadeOut" }
3.步骤
在评论结尾处的app / assets / javascripts / application.js中需要toastr.js ：
//= require toastr
并且还需要app / assets / stylesheets / application.css中的toastr.css ：
*= require toastr
从现在开始，您只需使用一行代码即可从任何文件中轻松烘焙消息：
toastr["success"]("This is what i want to toast!");
4.Step
在此步骤中，我们告诉rails在设置flash消息时启动toast：删除app / views / layouts / application.html.erb中的现有flash消息标记，并将其替换为以下代码：
<% unless flash.empty? %> <% end %>
它查找是否有可用的Flash消息，如果是，则其消息以您在步骤2中定义的方式显示在Toast中。
5.步骤
此外，Toast风格可以通过一种非常简单的方式更改为bootstrap样式：在toaster.css中更改以下语句：
#toast-container > div { position: relative; overflow: hidden; margin: 0 0 6px; padding: 15px 15px 15px 50px; width: 300px; -moz-border-radius: 3px 3px 3px 3px; -webkit-border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px; background-position: 15px center; background-repeat: no-repeat; -moz-box-shadow: 0 0 12px #999999; -webkit-box-shadow: 0 0 12px #999999; box-shadow: 0 0 12px #999999; color: #ffffff; opacity: 0.8; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); filter: alpha(opacity=80); }
对此：
#toast-container > div { width: 300px; }
就这样。 现在每个Flash消息都被烘烤，因此它会在您在toastr.options中指定的时间段后消失。
要设置Flash消息，您只需要以下ruby代码。 而不是:warning您可以使用引导程序警报标识符（ :danger ， :warning ， :info ， :success ）。
flash.now[:warning] = "This is an important warning"