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

Posted 2023-02-21

技术标签:

【中文标题】Twitter Bootstrap 警报消息关闭并再次打开【英文标题】：Twitter Bootstrap alert message close and open again 【发布时间】：2012-11-13 01:57:21 【问题描述】：

我对警报消息有疑问。它正常显示，当用户按下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! 我只需要在某些事件发生后显示警报消息（例如，单击按钮）。还是我做错了什么？

【问题讨论】：

【参考方案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>

【讨论】：

【参考方案2】：

这对我最有效：

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

【讨论】：

【参考方案3】：

这不能简单地通过添加一个额外的“容器” div 并每次将已删除的警报 div 添加回其中来完成。似乎对我有用？

html

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

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

【讨论】：

【参考方案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';。

【讨论】：

【参考方案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 树中的祖先来获取与选择器匹配的第一个元素。

【讨论】：

嘿！关于你做正确的答案。这将隐藏页面上具有相同类（即alert）的每个元素。对此的解决方案是用这行 $(this).closest("." + $(this).attr("data-hide")).hide(); 替换回调的内容，这只会影响最近的父元素，因为关闭按钮通常放置在它影响的警报中。是的，我没想过让它这样工作。但是，这将在一定程度上消除此解决方案的简单性。我会将它作为注释添加到现有代码中。谢谢！新的..你会在哪里定义'$(function()..' JavaScript 文件或标记中的任何位置。如果你使用 $(document).on('click', '[data-hide]', function() /* */ ) 你的答案将是完美的 ;)跨度> 【参考方案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'))
    )
);

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

【讨论】：

【参考方案7】：

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

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

【讨论】：

【参考方案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>

【讨论】：

【参考方案9】：

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

例子：

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

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

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

【讨论】：

【参考方案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

【讨论】：

【参考方案11】：

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

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

【讨论】：

真的需要吗？ jQuerys .hide 函数设置显示：无，屏幕阅读器不应该足够聪明，可以将其识别为隐藏吗？【参考方案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/

【讨论】：

data-bind="click:function()showAlert(false); 是 obtrusive javascript 远非 cleaner 的完美示例。我强烈建议不遵循这种方法 @Leo 以什么方式突兀？在各个方面都很突兀。您正在积极地将行为“嵌入”到您的 html 结构/标记中。想象一下，您必须改变这种行为......您必须改变多少页面和 html 元素？不要误会我的意思，它仍然回答了所提出的问题，这就是为什么我不会反对它。但这远非“更清洁”的解决方案不，我实际上是在说使用关注点分离。您的视图 (html) 永远不应包含任何 javascript，这对开发团队的负面影响可能是巨大的。这是关于淘汰赛的好问题（和答案）以及有争议的data-bind属性***.com/questions/13451414/unobtrusive-knockout 您认为“JavaScript”是什么？如果它只包含要调用的方法的名称怎么办？是不是它用一个参数（false）来调用它，让它在你眼里显得突兀？【参考方案13】：

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

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

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

【讨论】：

【参考方案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 */
   );
);

【讨论】：

【参考方案15】：

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

【讨论】：

不是真的，问题是 Data-dismiss 删除元素

以上是关于Twitter Bootstrap 警报消息关闭并再次打开的主要内容，如果未能解决你的问题，请参考以下文章

如何更改 Twitter Bootstrap 中警报消息的淡入淡出速度？

Twitter Bootstrap 警报可以淡入淡出吗？

Twitter Bootstrap JS 警报上的自动关闭功能

css CSS Twitter Bootstrap警报框

如何在 Twitter Bootstrap 中使用 CSS 将文本与元素的中间对齐？

Angular Bootstrap 警报不会在超时时关闭