加了：

Question

我的应用程序中有标准的flash消息，使用bootstrap进行样式设置。这些工作正常，但我想添加一个功能。
一个在他/她的屏幕上收到flash消息的访问者应该能够点击flash消息/使flash消息消失。例如，右上角的X，如果单击，则删除Flash消息。 这是否可行（没有javascript）？我已经添加了我当前的代码，这不允许这样的行为，如下所示。我应该如何针对此行为调整代码？

目前，我在我的控制器中有：

flash.now[:info] = "Your subscription has expired"

在application.html.erb中：

<% flash.each do |message_type, message| %>
  <%= content_tag(:div, message, class: "alert alert-#{message_type}") %>
<% end %>

我有一个部分_error_messages.html.erb：

<% if object.errors.any? %>
  <div id="error_explanation">
    <div class="alert alert-danger">
      The form contains <%= pluralize(object.errors.count, "error") %>.
    </div>
    <ul>
    <% object.errors.full_messages.each do |msg| %>
      <li><%= msg.html_safe %></li>
    <% end %>
    </ul>
  </div>
<% end %>

Answer 1

尝试这样给它

<div class="alert alert-info alert-dismissible" role="alert">
   <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
    <% flash.each do |message_type, message| %>
      <%= content_tag(:div, message, class: "alert alert-#{message_type}") %>
    <% end %>
</div>

<强>更新

这应该有效

<% flash.each do |message_type, message| %>
  <%= content_tag :div, class: "alert alert-#{message_type}" do -%>
  <%= message %>
  <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
  <% end -%>
<% end %>

Answer 2

不使用javascript的唯一解决方案是重新加载页面，但这不是一个可行的解决方案。

<% flash.each do |message_type, message| %>
  <%= content_tag(:div, 
      message + link_to('x', request.path), 
      class: "alert alert-#{message_type}") 
  %>
<% end %>

由于闪烁在显示后从会话中删除，因此不会有闪存消息。

但是你可以使用内置于bootstrap中的javascript功能，而无需实际编写任何javascript（我从Pavan的评论中偷了这个）。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<div class="flashes">
  <div class="alert alert-info">
    You forgot the lights on! <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
  </div>
  <div class="alert alert-warning">
    You forgot the stove on! <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
  </div>
</div>

＆＃13;

加了：

要将其集成到您的Rails应用程序中：

<% flash.each do |message_type, message| %>
  <div class="<%= "alert alert-#{message_type}" %>">
    <%= message %>
    <button type="button" class="close" data-dismiss="alert">
      <span aria-hidden="true">&times;</span>
      <span class="sr-only">Close</span>
    </button>
  </div>
<% end %>

虽然您可以使用content_tag并填充这里的跨度更简单。

在Rails中点击它，让flash消息消失

2 个答案:

加了：