Javascript Twitter引导警报消息关闭并再次打开

我对警报消息有问题。它正常显示，当用户按下

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>

---

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

该问题是由使用

style=“display:none”

引起的，您应该使用Javascript隐藏警报，或者至少在显示警报时，删除style属性。

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

快速修复方法：

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

<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隐藏元素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>

然后将数据替换为隐藏在标记中的数据

这将使用数据隐藏中指定的类隐藏所有元素，即：

data hide=“alert”

将使用alert类隐藏所有元素

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

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

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

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

定义。最接近于：

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

---

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

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

---

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

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

---

有关用法、测试和示例，请参阅。

我刚刚使用了一个模型变量来显示/隐藏对话框，并删除了

data dismission=“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>

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

&时代；
错误{{vm.exception}

---

这对我来说很有用，并且不再需要使用jquery，如果您使用的是诸如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>

我同意Henrik Karlsson发表并由Martin Prikryl编辑的答案。基于可访问性，我有一个建议。我会在它的末尾添加.attr（“aria hidden”，“true”），这样它看起来像：

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

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

例如：

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

因此，如果您想要一个能够处理动态html页面的解决方案，因为您已经包含了它，那么您应该使用jQuery的live在dom中现在和将来的所有元素上设置处理程序或将其删除

我用


$（文档）。在（“单击”，“数据隐藏最近点]”，函数（e）{
e、 预防默认值（）；
var$this=$（this）；
$this.closest（$this.attr（“数据隐藏最近”））.hide（）；
});
。警报成功{
背景色：#dff0d8；
边框颜色：#d6e9c6；
颜色：#3c763d；
}
.警惕{
边框：1px实心透明；
边界半径：4px；
边缘底部：20px；
填充：15px；
}
.结束{
颜色：#000；
浮动：对；
字号：21px；
字体大小：粗体；
线高：1；
不透明度：0.2；
文本阴影：0 1px 0#fff；
}

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

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

以下是一个基于by的解决方案，但具有适当的事件触发（基于）：

答案主要是我的，请注意。
以上所有解决方案都使用外部库（angular或jQuery）和旧版本的引导。下面是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>

如果希望以编程方式在代码中的其他位置隐藏或显示警报，只需执行
myAlert.style.display='none'或
myAlert.style.display='block'
这不能简单地通过添加额外的“容器”div并每次将删除的警报div添加回其中来实现。似乎对我有用

HTML



JS

$（“#警报容器”）.html（“”）；
$（“#警报”）.addClass（“警报信息警报解除”）；
$（“#警报”）.html（“Info！message”）；
这对我最有效：

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

使用JQuery有一种非常简单的方法来实现这一点

如果从警报div中删除
data disclesh=“alert”
，则只需使用
x
按钮隐藏警报，方法是添加单击事件并与警报的
display
css属性交互

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

然后，无论何时再次需要，都可以再次切换
display
属性

完整示例：

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

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


啊哦。。。出了点问题
&时代；
$（“.close”）。单击（函数（）{
$（this.parent（）.css（“显示”、“无”）；
});
//使用任何你喜欢的活动
$（“#显示#警报”）。单击（函数（）{
$（“#我的提醒）.css（“显示”、“继承”）；
}
$(".close").click(function(){
   $(this).parent().css("display", "none");
});

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