推特(Twitter)引导警报消息再次关闭并再次打开。

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 (close)时关闭它，但是当用户试图再次显示它(例如，单击按钮事件)时，它就不会显示。(而且，如果我将这个警告消息打印到控制台，它就等于[]。)我的代码是:

 <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?

注!我需要在某些事件发生后(例如，单击按钮)显示警报消息。或者我做错了什么?

10 个解决方案

#1

149

Data-dismiss completely removes the element. Use jQuery's .hide() method instead.

数据取消完全删除元素。使用jQuery的.hide()方法。

The fix-it-quick method:

fix-it-quick方法:

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>

http://jsfiddle.net/cQNFL/

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:

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

然后将数据解调改为数据隐藏在标记中。在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, i中指定的类来隐藏所有元素。e: data-hide="alert"会将所有元素隐藏在alert类中。

Xeon06 provided 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 an unique class. Please not that, however, you need to place the close button within the alert.

这只会隐藏最近的父元素。如果您不想让每个警告都是唯一的类，那么这将非常有用。但是，请不要这样做，您需要在警报中放置关闭按钮。

Definition of .closest from jquery doc: 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.)

距离jquery doc最近的定义:对于集合中的每个元素，通过测试元素本身并在DOM树中遍历其祖先元素，获得与选择器匹配的第一个元素。

#2

I just used a model variable to show/hide the dialog and removed the data-dismiss="alert"

我只是使用了一个模型变量来显示/隐藏对话框并删除了data- dismis= "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">&times;</button>
    <strong>Error  !  </strong>{{vm.exception}}
</div>

works for me and stops the need to go out to jquery

对我来说很有效，不再需要使用jquery

#3

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">&times;</span>
        <span class="sr-only">Close</span>
   </button>
   Warning! Better check yourself, you're not looking too good.
</div>

http://jsfiddle.net/bce9gsav/5/

#4

I think a good approach to this problem would be to take advantage of Bootstrap's close.bs.alert event 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的密切关系。警告事件类型以隐藏警报，而不是删除它。Bootstrap公开此事件类型的原因是，您可以覆盖从DOM删除警报的默认行为。

$('.alert').on('close.bs.alert', function (e) {
    e.preventDefault();
    $(this).addClass('hidden');
});

#5

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>

#6

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.

我也遇到了这个问题，简单地攻击关闭按钮的问题是，我仍然需要访问标准的bootstrap警报关闭事件。

My solution was to write a small, customisable, jquery plugin that 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-bs3Alert for usage, tests, and examples.

参见https://github.com/davesag/jquerybs3alert，了解使用、测试和示例。

#7

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");

#8

The problem is caused by using the style="display:none", you should hide the alert with Javascript or at least when showing it, remove the style attribute.

问题是由于使用了style="display:none"，您应该将警告隐藏在Javascript中，或者至少在显示它时，删除样式属性。

#9

Based on the other answers and changing data-dismiss to data-hide, this example handles opening the alert from a link and allows the alert to be opened and closed repeatedly

基于其他答案并将数据取消更改为数据隐藏，本示例处理从链接打开警报，并允许重复打开和关闭警报

$('a.show_alert').click(function() {
    var $theAlert = $('.my_alert'); /* class on the alert */
    $theAlert.css('display','block');
   // set up the close event when the alert opens
   $theAlert.find('a[data-hide]').click(function() {
     $(this).parent().hide(); /* hide the alert */
   });
});

#10

I've tried all the methods and the best way for me is to use the built-in bootstrap classes .fade and .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.

有趣的事实:这适用于所有的元素。不只是警报。

#1

149