使用示例：

Question

我已经尝试了我在这里找到的所有代码和谷歌似乎没有任何效果。我试图在页面上的任何位置单击鼠标时关闭我的警报。我的application.js中有//=require bootstrap，它在列表的最后。以下代码是我希望被拒绝的。

<% flash.each do |key, value| %>
 <div class="col-md-4 col-md-offset-4">
  <div class="alert alertPrimary alert-dismissible fade in textCenter">
  <button type="button" class="close" data-dismiss="alert" aria-hidden="true"></button>
   <% if value.is_a?(String) %>
     <%= value %>
   <% else %>
   <% end %>
  </div>
 </div>
<% end %>

和

return '' if resource.errors.empty?

messages = resource.errors.full_messages.map { |msg| content_tag(:li, msg) }.join
html = <<-HTML
<div class="alert alert-danger alert-dismissible fade in textCenter">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true"></button>
  #{messages}
</div>
HTML

html.html_safe

我似乎无法找到任何可以解决问题的javascript / jquery。当我添加＆＃39; x＆＃39;在按钮代码中，当您点击该按钮时它会关闭警报，但这不是我正在寻找的行为。我只是希望当用户点击任何地方时警报消失。

我的整个application.js文件

//= require turbolinks
//= require jquery
//= require jquery_ujs
//= require jquery.turbolinks
//= require bootstrap
//= require_tree .

Answer 1

您可以使用以下内容：

// Use JQuery selector and bind a function to the click event
// $("body") selects the <body> tag
$("body").click(function(){  
    $(".alert").alert("close");
});

此方法可通过bootstrap.js

中的bootstrap's alert plugin获得

使用示例：

$(document).ready(function() {
  $(".content").click(function() {
    $(".alert").alert("close");
  });
});

.content {
  width: 100%;
  height: 400px;
  background: #aaa;
}

<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.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="content">
  <div class="alert alert-warning alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span>
    </button>
    <strong>Warning!</strong> Better check yourself, you're not looking too good.
  </div>
</div>

单击时引导警报解除

1 个答案:

使用示例：