Twitter Bootstrap警报消息关闭并再次打开

我的警报消息有问题。它正常显示，当用户按下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>

事件：

 $(".alert").show();

PS！仅在发生某些事件（例如，单击按钮）后才需要显示警报消息。还是我做错了什么？

数据删除会完全删除该元素。请改用jQuery的.hide（）方法。

快速修复方法：

使用嵌入式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/cQNF​​L/

但是，仅当您懒惰时才应使用它（如果您想要可维护的应用程序，这不是好事）。

做正确的方法：

创建新的数据属性以隐藏元素。

Javascript：

$(function(){
    $("[data-hide]").on("click", function(){
        $("." + $(this).attr("data-hide")).hide()
        // -or-, see below
        // $(this).closest("." + $(this).attr("data-hide")).hide()
    })
})

然后在标记中将data-dismiss更改为data-hide。jsfiddle的示例。

$("." + $(this).attr("data-hide")).hide()

这将隐藏数据隐藏中指定类的所有元素，即：data-hide="alert"将隐藏警报类的所有元素。

Xeon06提供了一种替代解决方案：

$(this).closest("." + $(this).attr("data-hide")).hide()

这只会隐藏最接近的父元素。如果您不想给每个警报一个唯一的类，这将非常有用。请注意，但是，您需要在警报中放置关闭按钮。

jquery doc中.closest的定义：

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

我只是使用模型变量来显示/隐藏对话框，并删除了 data-dismiss="alert"

例：

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

为我工作，并停止了需要去jQuery的

我认为解决此问题的一种好方法是利用Bootstrap的close.bs.alert事件类型隐藏警报，而不是删除警报。Bootstrap公开此事件类型的原因是，您可以覆盖从DOM中删除警报的默认行为。

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

如果您使用的是敲门.js之类的MVVM库（我强烈推荐），则可以更加简洁地进行操作：

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

因此，如果您想要一个可以处理动态html页面的解决方案，那么您应该使用jQuery的live来为dom中现在和将来或将来被删除的所有元素设置处理程序。

我用

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

这最适合我：

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

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

我的解决方案是编写一个小型的，可定制的jquery插件，以最小的麻烦注入一个格式正确的Bootstrap 3警报（根据需要，可以使用或不使用关闭按钮），并允许您在关闭盒子后轻松地重新生成它。

有关用法，测试和示例，请参见https://github.com/davesag/jquery-bs3Alert。

我同意亨里克·卡尔森（Henrik Karlsson）发表并由马丁·普里克里（Martin Prikryl）编辑的答案。根据可访问性，我有一个建议。我将在其末尾添加.attr（“ aria-hidden”，“ true”），使其看起来像：

$(this).closest("." + $(this).attr("data-hide")).attr("aria-hidden", "true");

以上所有解决方案都使用外部库（Angular或jQuery）以及旧版本的Bootstrap。因此，这是Charles Wyke-Smith的纯JavaScript解决方案，应用于Bootstrap 4。是的，Bootstrap需要使用jQuery作为其自己的模式和警报代码，但并不是每个人都使用jQuery编写自己的代码。

这是警报的html：

<div id="myAlert" style="display: none;" 
    class="alert alert-success alert-dismissible fade show">
    <button type="button" class="close" data-hide="alert">&times;</button>
    <strong>Success!</strong> You did it!
</div>

请注意，最初，警报是隐藏的（style="display: none;"），data-dismiss="alert"此处使用代替标准data-hide="alert"。

这是显示警报并覆盖关闭按钮的JavaScript：

var myAlert = document.getElementById('myAlert');
// Show the alert box
myAlert.style.display = 'block';
// Override Bootstrap's standard close action
myAlert.querySelector('button[data-hide]').addEventListener('click', function() {
    myAlert.style.display = 'none';
});

如果您希望以编程方式在代码的其他位置隐藏或显示警报，请执行 myAlert.style.display = 'none';或myAlert.style.display = 'block';。

该问题是由于使用引起的style="display:none"，您应该使用Java 隐藏警报，或者至少在显示警报时，删除样​​式属性。

根据其他答案并将数据丢弃更改为数据隐藏，此示例处理从链接打开警报并允许重复打开和关闭警报

$('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 */
   });
});

我已经尝试了所有方法，而最好的方法是使用内置的bootstrap类 .fade和.in

例：

<div class="alert alert-danger fade <?php echo ($show) ? 'in' : '' ?>" role="alert">...</div>

注意：在jQuery中，addClass（'in'）显示警报，removeClass（'in'）隐藏警报。

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

这是一个基于解决答案由亨里克·卡尔森但适当的事件触发（基于引导源）：

$(function(){
    $('[data-hide]').on('click', function ___alert_hide(e) {
        var $this = $(this)
        var selector = $this.attr('data-target')
        if (!selector) {
            selector = $this.attr('href')
            selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
        }

        var $parent = $(selector === '#' ? [] : selector)

        if (!$parent.length) {
            $parent = $this.closest('.alert')
        }

        $parent.trigger(e = $.Event('close.bs.alert'))

        if (e.isDefaultPrevented()) return

        $parent.hide()

        $parent.trigger($.Event('closed.bs.alert'))
    })
});

作为笔记，答案主要是对我来说。

不能简单地通过添加一个额外的“容器” div并每次将删除的警报div添加回去来做到这一点。似乎为我工作？

的HTML

<div id="alert_container"></div>

JS

 $("#alert_container").html('<div id="alert"></div>');          
 $("#alert").addClass("alert alert-info  alert-dismissible");
 $("#alert").html('<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a><strong>Info!</strong>message');