javascript - 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();

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

score 183 · Accepted Answer

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。jsfiddle 的示例。

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

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

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

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

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

.closest 来自jquery doc的定义：

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

score 27 · Accepted Answer

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

score 19 · Accepted Answer

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

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

score 5 · Accepted Answer

如果您使用的是诸如 knockout.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/

score 3 · Accepted Answer

这对我最有效：

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

score 2 · Accepted Answer

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

score 2 · Accepted Answer

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

score 1 · Accepted Answer

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

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

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

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

基于其他答案并将 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 */
   });
});

score 0 · Accepted Answer

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

例子：

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

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

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

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

使用 JQuery 有一个非常简单的方法来做到这一点

如果您data-dismiss="alert"从警报 div 中删除，您可以使用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>

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

15 回答 15

Related

Reference