Question

我想让闪光信息在几秒钟后消失。所以我使用这些代码：

$(function() {
  $('.alert').slideUp(1500);
});

.alert是我添加到flash消息的引导类。

我的应用程序仅通过omniauth实现了用户登录/注销功能。（使用facebook和google plus）最后列出的登录/注销代码。

当我登录时，flash消息就像我想象的那样消失了。但是当我退出时，闪光灯并没有消失。

但如果我使用这些代码，此功能将正常工作。（但与我想要的略有不同）

$(function() {
  setInterval(function(){
    $('.alert').slideUp(500);
  }, 1000);
});

登录/退出代码：

class SessionsController < ApplicationController
  def create
    auth_data = request.env['omniauth.auth']
    auth = Authorization.find_by( provider: auth_data['provider'], uid: auth_data['uid'] ) 
    user = auth.nil? ? User.create_with_omniauth(auth_data) : auth.user
    session[:user_id] = user.id
    if !user.email
      redirect_to edit_user_path(user), :alert => "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

Answer 1

试试这个

$(function() {
  setTimeout(function(){
    $('.alert').slideUp(500);
  }, 1000);
});

Answer 2

以前我遇到过同样的问题，但现在解决了这个问题：
在您的代码中尝试此操作

<script type="text/javascript">
  $(document).ready(function(){
    setTimeout(function(){
    $('.alert').fadeOut();
    }, 2000);
  })
</script>

Answer 3

对于此问题，建议使用toastr.js。它提供了一种烘烤行为，只需进行一些更改，它就可以完美地与bootstrap和rails flash消息一起使用。它完全可定制，易于使用，并且还具有更多优势。

<强> 1。步骤

下载toastr.css和toastr.js，将CSS文件放在 app / assets / stylesheets 目录中，将JS文件放在 app / assets / javascripts中

<强> 2。步骤

打开toastr demo 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? %> <script type="text/javascript"> <% flash.each do |f| %> <% type = f[0].gsub('alert', 'error').gsub('notice', 'info') %> toastr['<%= (type == 'danger' ? 'error' : type) %>']('<%= f[1] %>', '<%= type %>'); <% end %> </script> <% end %>

查看Flash消息是否可用，如果是，则其消息以您在步骤2中定义的方式显示在吐司中。

<强> 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"

让flash消息在rails中的同一页面中消失

3 个答案: