javascript - 单击时 Bootstrap 警报关闭

标签 javascript jquery twitter-bootstrap ruby-on-rails-4

我已经尝试了在这里和谷歌上可以找到的所有代码,但似乎没有任何效果。我试图通过在页面上的任意位置单击鼠标来关闭我的警报。 我的 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。当我在按钮代码中添加“x”时,它会在您单击该按钮时关闭警报,但这不是我要寻找的行为。我只希望当用户点击任何地方时警报消失。

我的整个 application.js 文件

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

最佳答案

你可以这样使用:

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

此方法可通过 bootstrap's alert plugin 获得那是 bootstrap.js

的一部分

示例:

$(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>

关于javascript - 单击时 Bootstrap 警报关闭,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30676245/

相关文章:

javascript - Bootstrap 3 导航栏切换不起作用

javascript - 如何在外部 div 保持不变的情况下缩放整个嵌套 div

javascript - jQuery 每个循环 3 维对象数组

javascript - 在Javascript中调用匿名函数中的函数时如何使用 "this"关键字?

javascript - 当我单击关闭选项卡或关闭浏览器窗口时,是否可以将页面重定向到另一个 url?

html - 尝试填充 div 时图像仍然有边距

css - 使用 wells 的 Twitter bootstrap(safari vs chrome)

javascript - 表单 onsubmit 运行函数但更改不会持续

javascript - 显示输入类型文本的数量等于我的输入文件中选定文件的数量,无需发送表单

javascript - Backbone.js - 此按钮和事件绑定(bind)正确吗?