Bootstrap 4隐藏未关闭警报答案

【问题标题】：Bootstrap 4 hide not close alertsBootstrap 4隐藏未关闭警报
【发布时间】：2017-11-02 03:17:45
【问题描述】：

正如标题所述，我想知道隐藏警报的最佳方法，这样我们就可以在不重新加载页面的情况下获得另一个警报。 BS3 这里有几个答案，但我希望 BS4 有更好的解决方案。
这是我的 HTML：

<div style="display: none;" class="alert alert-danger alert-with-icon" data-notify="container">
          <div class="container">
              <div class="alert-wrapper">
                  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                      <i class="nc-icon nc-simple-remove"></i>
                  </button>
                  <div class="message"><i class="nc-icon nc-bell-55"></i>
                      My alert message.
                  </div>
              </div>
          </div>
      </div>

我正在使用它来触发警报被打开：

$('.alert').show();

【问题讨论】：

“有另一个警报而不重新加载页面”是什么意思？你想写一个函数来隐藏和显示警报吗？

标签： javascript twitter-bootstrap alert bootstrap-4

【解决方案1】：

您只需添加一个 on listener 即可覆盖默认行为。这对我有用：

$(".alert").on("close.bs.alert", function () {
      $alertMsg.hide();
      return false;
});

此解决方案由 Winifred Cadap 在他的博客上提供。你可以找到它here。

【讨论】：

【解决方案2】：

试试这个

$(".alert").alert('close');

【讨论】：

【解决方案3】：

要隐藏只需使用$('.alert').hide();

查看下面的例子

$('.alert').show();
setTimeout(function(){ $('.alert').hide(); }, 3000);

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

<div style="display: none;" class="alert alert-danger alert-with-icon" data-notify="container">
          <div class="container">
              <div class="alert-wrapper">
                  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                      <i class="nc-icon nc-simple-remove"></i>
                  </button>
                  <div class="message"><i class="nc-icon nc-bell-55"></i>
                      My alert message.
                  </div>
              </div>
          </div>
      </div>

【讨论】：

【解决方案4】：

简单的方法是消除内联警报。为此将 .alert-dismissible 类添加到您的警报框

<div style="display: none;" class="alert alert-danger alert-with-icon alert-dismissible fade show" data-notify="container" role="alert">
      <div class="container">
          <div class="alert-wrapper">
              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                  <i class="nc-icon nc-simple-remove"></i>
              </button>
              <div class="message"><i class="nc-icon nc-bell-55"></i>
                  My alert message.
              </div>
          </div>
      </div>
  </div>

我修改了你的代码。现在按钮中的data-dismiss="alert" 属性触发javascript 功能。我还添加了fade show 类，它可以提供流畅的动画效果。

我不明白你的意思

隐藏一个警报，以便我们可以在不重新加载页面的情况下获得另一个警报？

【讨论】：

这将在信用卡表单上实现，因此当焦点字段出现错误时应弹出此警报。如果您“关闭”警报并且在其他字段上出现另一个错误，则使用 close 将从 DOM 中完全删除警报，并且不会显示来自表单的未来警报。
一个选项，您可以向按钮添加单击事件，从而更改显示属性。