自動隱藏導軌中的Flash消息

我的消息的代碼是：

<%= simple_form_for(@dashboard_user) do |f| %> 
<% if @dashboard_user.errors.any? %> 
<ul class="alert alert-danger"> 
    <% for message_error in @dashboard_user.errors.full_messages %> 
    <li> 
     <%= message_error %> 
    </li> 
    <% end %> 
</ul> 
<% end %>

如何我自動褪色這些消息？

來源

2014-11-06 Raj kumar

這應該適合你。您可以指定括號內的時間跨度。將此添加到您的Javascript中。這是很常見的所有：

$(".alert").fadeOut(3000);

對於警報的成功：

$(".alert-success").fadeOut(3000);

對於警報的危險：

$(".alert-danger").fadeOut(3000);

來源

2014-11-06 06:18:25

是否可以更改警報成功消息和警報失敗消息的fade_out時間？ – 2014-11-06 08:30:53

這不會在Rails 4中使用Turbolinks – Abhinay 2016-01-18 19:06:03

嘗試：

<%= simple_form_for(@dashboard_user) do |f| %> 
<% if @dashboard_user.errors.any? %> 
    <span class="error_msgs"> 
    <ul class="alert alert-danger"> 
     <% for message_error in @dashboard_user.errors.full_messages %> 
     <li> 
      <%= message_error %> 
     </li> 
     <% end %> 
    </ul> 
    </span> 
    <script> 
    setTimeout("$('.error_msgs').fadeOut('slow')", 5000) 
    </script> 
<% end %>

這將5000毫秒後淡出你的閃光。

來源

2014-11-06 06:14:29

您的代碼工作正常..謝謝.. – 2014-11-06 06:50:21

我如何在所有頁面中使用此代碼？ – 2014-11-06 06:51:03

將腳本移動到所有視圖通用的文件，並使用相同的類來跨度或任何你喜歡淡出的文件。 – 2014-11-06 06:53:23

將此代碼放在您的應用程序佈局

<div id="wrapper"> 
    <div id="page-wrapper"> 
    <div class="row"> 
    <div class="col-lg-12"> 
    <% flash.each do |name, msg| %> 
     <%= content_tag(:div, msg, :id=>"#{name}", :class `enter code here`=> "alert alert- info") %> 
    <%end%> 
    </div> 
    </div> 
</div> 
</div>

而且將此代碼放在應用程序的底部離子佈局

<script type="text/javascript"> 
window.setTimeout(function() 
{ 
$("#notice").fadeTo(500, 0).slideUp(500, function() 
{ 
$(this).remove(); 
}); 
}, 5000); 
</script>

來源

2015-03-30 09:53:18

這一個將與Turbolinks-3工作。

$(document).on('page:change', function(){ 
$(".alert").delay(2000).slideUp(500, function(){ 
     $(".alert").alert('close'); 
    }); 
});

Turbolinks 5：

$(document).on('turbolinks:load', function(){ 
    $(".alert").delay(2000).slideUp(500, function(){ 
      $(".alert").alert('close'); 
     }); 
    });

來源

2016-01-18 19:09:38 Abhinay

在application.html.erb其作品遍佈應用程序添加了這些代碼。

<script> 
    setTimeout("$('.error_msgs').fadeOut('slow')", 6000) 
    setTimeout("$('.success_msgs').fadeOut('slow')", 3000) 
</script>

在view：

<span class="success_msgs"> <% if notice %> 
     <p class="alert alert-success"> 
      <%= notice %> 
     </p> <% end %> </span> 

<span class="error_msgs"> <% if alert %> 
     <p class="alert alert-success"> 
      <%= alert %> 
     </p> <% end %> </span>

來源

2016-11-04 11:36:06

在佈局共享/ flash_messages.html.erb下腳本

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

這對我的作品寫。注意： - 如果您在application.js文件中聲明瞭fadeout函數，則從那裏刪除。

來源

2017-03-17 09:41:45 Gabbar

不要把它放在你的應用程序的標記，只是把一些在jQuery的，可以在每個頁面上運行JavaScript文件，並要求其在application.js

$(function() { 
    setTimeout(function() { 
    $('.alert').fadeOut('fast'); 
    }, 5000); 
}

這將隱藏5秒後報警DIV

來源

2017-07-13 04:36:57

自動隱藏導軌中的Flash消息

回答

相關問題