Question

正如标题所述，我想知道隐藏警报的最佳方法，以便我们可以在不重新加载页面的情况下发出另一个警报。 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();

Answer 1

您只需在侦听器上添加即可覆盖默认行为。这对我有用：

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

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

Answer 2

试试这个

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

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

Answer 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类，它可以提供流畅的动画。

我不明白你的意思

隐藏提醒，以便我们可以在不重新加载页面的情况下获得其他提醒？

Bootstrap 4隐藏不关闭警报

4 个答案: