Javascript Twitter Bootstrap 警报消息关闭并再次打开
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13550477/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap alert message close and open again
提问by Henrik Karlsson
I have a problem with alert messages. It is displayed normally, and I can close it when the user presses x(close), but when the user tries to display it again (for example, click on the button event) then it is not shown. (Moreover, if I print this alert message to console, it is equal to [].) My code is here:
我有警报消息的问题。它正常显示，当用户按下x（关闭）时我可以关闭它，但是当用户尝试再次显示它时（例如，单击按钮事件）则不显示。（此外，如果我将此警报消息打印到控制台，则等于[]。）我的代码在这里：
<div class="alert" style="display: none">
<a class="close" data-dismiss="alert">×</a>
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
And event:
和事件：
$(".alert").show();
P.S!I need to show alert message only after some event happened (for example, button clicked). Or what I am doing wrong?
附注！我只需要在发生某些事件（例如，单击按钮）后才显示警报消息。或者我做错了什么？
回答by Henrik Karlsson
Data-dismiss completely removes the element. Use jQuery's .hide() method instead.
Data-dismiss 完全删除元素。改用 jQuery 的 .hide() 方法。
The fix-it-quick method:
快速修复方法：
Using inline javascript to hide the element onclick like this:
使用内联 javascript 隐藏元素 onclick，如下所示：
<div class="alert" style="display: none">
<a class="close" onclick="$('.alert').hide()">×</a>
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
<a href="#" onclick="$('alert').show()">show</a>
This should however only be used if you are lazy (which is no good thing if you want an maintainable app).
然而，这应该只在你懒惰的时候使用（如果你想要一个可维护的应用程序，这不是一件好事）。
The do-it-right method:
正确做法：
Create a new data attribute for hiding an element.
创建用于隐藏元素的新数据属性。
Javascript:
Javascript：
$(function(){
$("[data-hide]").on("click", function(){
$("." + $(this).attr("data-hide")).hide()
// -or-, see below
// $(this).closest("." + $(this).attr("data-hide")).hide()
})
})
and then change data-dismiss to data-hide in the markup. Example at jsfiddle.
然后在标记中将 data-dismiss 更改为 data-hide。jsfiddle 中的示例。
$("." + $(this).attr("data-hide")).hide()
This will hide all elements with the class specified in data-hide, i.e: data-hide="alert"will hide all elements with the alert class.
这将隐藏具有在 data-hide 中指定的类的所有元素，即：data-hide="alert"将隐藏具有警报类的所有元素。
Xeon06provided an alternative solution:
Xeon06提供了另一种解决方案：
$(this).closest("." + $(this).attr("data-hide")).hide()
This will only hide the closest parent element. This is very useful if you don't want to give each alert a unique class. Please note that, however, you need to place the close button within the alert.
这只会隐藏最近的父元素。如果您不想给每个警报一个唯一的类，这将非常有用。但是请注意，您需要将关闭按钮放在警报中。
Definition of .closest from jquery doc:
jquery doc中 .closest 的定义：
For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
对于集合中的每个元素，通过测试元素本身并在 DOM 树中向上遍历其祖先来获取与选择器匹配的第一个元素。
回答by user1661621
I just used a model variable to show/hide the dialog and removed the data-dismiss="alert"
我只是使用模型变量来显示/隐藏对话框并删除了 data-dismiss="alert"
Example:
例子：
<div data-ng-show="vm.result == 'error'" class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-ng-click="vm.result = null" aria-hidden="true">×</button>
<strong>Error ! </strong>{{vm.exception}}
</div>
works for me and stops the need to go out to jquery
对我有用，不再需要去 jquery
回答by kimbaudi
I think a good approach to this problem would be to take advantage of Bootstrap's close.bs.alertevent type to hide the alert instead of removing it. The reason why Bootstrap exposes this event type is so that you can overwrite the default behavior of removing the alert from the DOM.
我认为解决这个问题的一个好方法是利用 Bootstrap 的close.bs.alert事件类型来隐藏警报而不是删除它。Bootstrap 公开此事件类型的原因是，您可以覆盖从 DOM 中删除警报的默认行为。
$('.alert').on('close.bs.alert', function (e) {
e.preventDefault();
$(this).addClass('hidden');
});
回答by Ohad Schneider
If you're using an MVVM library such as knockout.js (which I highly recommend) you can do it more cleanly:
如果您使用的是 MVVM 库，例如 Knockout.js（我强烈推荐），您可以更简洁地进行操作：
<div class="alert alert-info alert-dismissible" data-bind="visible:showAlert">
<button type="button" class="close" data-bind="click:function(){showAlert(false);}>
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
Warning! Better check yourself, you're not looking too good.
</div>
回答by Joschi
So if you want a solution that can cope with dynamic html pages, as you already include it you should use jQuery's live to set the handler on all elements that are now and in future in the dom or get removed.
因此，如果您想要一个可以处理动态 html 页面的解决方案，因为您已经包含它，您应该使用 jQuery 的 live 为现在和将来在 dom 中或被删除的所有元素设置处理程序。
I use
我用
$(document).on("click", "[data-hide-closest]", function(e) {
e.preventDefault();
var $this = $(this);
$this.closest($this.attr("data-hide-closest")).hide();
});.alert-success {
background-color: #dff0d8;
border-color: #d6e9c6;
color: #3c763d;
}
.alert {
border: 1px solid transparent;
border-radius: 4px;
margin-bottom: 20px;
padding: 15px;
}
.close {
color: #000;
float: right;
font-size: 21px;
font-weight: bold;
line-height: 1;
opacity: 0.2;
text-shadow: 0 1px 0 #fff;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="alert alert-success">
<a class="close" data-hide-closest=".alert">×</a>
<strong>Success!</strong> Your entries were saved.
</div>回答by Dave Sag
I ran into this problem as well and the the problem with simply hacking the close-button is that I still need access to the standard bootstrap alert-close events.
我也遇到了这个问题，简单地破解关闭按钮的问题是我仍然需要访问标准的引导程序警报关闭事件。
My solution was to write a small, customisable, jquery pluginthat injects a properly formed Bootstrap 3 alert (with or without close button as you need it) with a minimum of fuss and allows you to easily regenerate it after the box is closed.
我的解决方案是编写一个小型的、可定制的 jquery 插件，它以最少的麻烦注入正确格式的 Bootstrap 3 警报（根据需要带或不带关闭按钮），并允许您在关闭框后轻松地重新生成它。
See https://github.com/davesag/jquery-bs3Alertfor usage, tests, and examples.
有关用法、测试和示例，请参阅https://github.com/davesag/jquery-bs3Alert。
回答by Harshal Lonare
This worked for me best:
这对我最有效：
$('.alert').on('close.bs.alert', function (e) {
e.preventDefault();
$(this).hide();
});
回答by cfnerd
I agree with the answer posted by Henrik Karlsson and edited by Martin Prikryl. I have one suggestion, based on accessibility. I would add .attr("aria-hidden", "true") to the end of it, so that it looks like:
我同意 Henrik Karlsson 发布并由 Martin Prikryl 编辑的答案。我有一个基于可访问性的建议。我会将 .attr("aria-hidden", "true") 添加到它的末尾，使其看起来像：
$(this).closest("." + $(this).attr("data-hide")).attr("aria-hidden", "true");
回答by clodal
I've tried all the methods and the best way for me is to use the built-in bootstrap classes .fadeand .in
我已经尝试了所有方法，对我来说最好的方法是使用内置的引导程序类 .fade和.in
Example:
例子：
<div class="alert alert-danger fade <?php echo ($show) ? 'in' : '' ?>" role="alert">...</div>
Note: In jQuery, addClass('in') to show the alert, removeClass('in') to hide it.
注意：在 jQuery 中， addClass('in') 显示警报， removeClass('in') 隐藏它。
Fun fact: This works for all elements. Not just alerts.
有趣的事实：这适用于所有元素。不仅仅是警报。
回答by Plamen Nikolov
The problem is caused by using the style="display:none", you should hide the alertwith Javascript or at least when showing it, remove the style attribute.
问题是由使用 引起的style="display:none"，您应该使用 Javascript隐藏警报，或者至少在显示时删除样式属性。
