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

Question

我对警报消息有疑问。它正常显示，当用户按下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();

P.S! 我只需要在某些事件发生后显示警报消息（例如，单击按钮）。还是我做错了什么？

Answer 1

使用 JQuery 有一种非常简单的方法

如果您从警报 div 中删除 data-dismiss="alert"，您可以使用 x 按钮隐藏警报，方法是添加点击事件并与警报的 display css 属性交互。

$(".close").click(function(){
   $(this).parent().css("display", "none");
});

然后，当您再次需要它时，您可以再次切换display 属性。

完整示例：

<div class="alert alert-danger" role="alert" id="my_alert" style="display: none;">
   Uh Oh... Something went wrong
  <button type="button" class="close" aria-label="Close">
     <span aria-hidden="true">&times;</span>
  </button>
</div>

<script>
   $(".close").click(function(){
      $(this).parent().css("display", "none");
   });

   //Use whatever event you like
   $("#show_alert").click(function(){
      $("#my_alert).css("display", "inherit");
   });
<script>

Answer 2

这对我最有效：

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

Answer 3

这不能简单地通过添加一个额外的“容器” 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');

Answer 4

以上所有解决方案都使用外部库，无论是 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';。

Answer 5

Data-dismiss 完全删除元素。改用 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/cQNFL/

这应该只在你懒惰的时候使用（如果你想要一个可维护的应用程序，这不是一件好事）。

正确的方法：

为隐藏元素创建一个新的数据属性。

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。 Example at jsfiddle.

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

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

Xeon06 提供了另一种解决方案：

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

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

.closest from jquery doc的定义：

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

Answer 6

这是一个基于Henrik Karlsson 的answer 的解决方案，但具有适当的事件触发（基于Bootstrap sources）：

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

答案主要是给我的，作为一个注释。

Answer 7

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

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

Answer 8

因此，如果您想要一个可以处理动态 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>

Answer 9

我已经尝试了所有方法，对我来说最好的方法是使用内置引导类 .fade 和 .in

例子：

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

注意：在 jQuery 中，addClass('in') 显示警报，removeClass('in') 隐藏它。

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

Answer 10

我只是使用模型变量来显示/隐藏对话框并删除了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

Answer 11

我同意 Henrik Karlsson 发布并由 Martin Prikryl 编辑的答案。我有一个建议，基于可访问性。我会将 .attr("aria-hidden", "true") 添加到它的末尾，使其看起来像：

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

Answer 12

如果您使用 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/

Answer 13

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

我的解决方案是编写一个small, customisable, jquery plugin，它会以最少的麻烦注入一个格式正确的 Bootstrap 3 警报（根据需要使用或不使用关闭按钮），并允许您在关闭框后轻松重新生成它。

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

Answer 14

基于其他答案并将 data-dismiss 更改为 data-hide，此示例处理从链接打开警报并允许重复打开和关闭警报

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

Answer 15

问题是使用style="display:none"引起的，你应该用Javascript隐藏alert，或者至少在显示的时候去掉style属性。