javascript - Bootstrap 4 hide not close alerts - Stack Overflow

admin管理员组

文章数量:1430001

As the title states, I'd like to know the best way to hide an alert so that we can have another alert without reloading the page. There are several answers on here for BS3, but I'm hoping there's a better solution for BS4.
Here's my 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>

And I'm using this to trigger the alert to being opened:

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

As the title states, I'd like to know the best way to hide an alert so that we can have another alert without reloading the page. There are several answers on here for BS3, but I'm hoping there's a better solution for BS4.
Here's my 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>

And I'm using this to trigger the alert to being opened:

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

• javascript
• twitter-bootstrap
• alert
• bootstrap-4

Share Improve this question Follow asked Nov 2, 2017 at 3:17 John Von CollnJohn Von Colln 1511 silver badge55 bronze badges 1

• What do you mean by "have another alert without reloading the page"? Do you want to write a function to hide and show alerts? – Harsha Jayamanna Commented Nov 2, 2017 at 3:53

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

You simply have to add an on listener to overwrite the default behaviour. This worked for me:

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

This solution was provided by Winifred Cadap on his blog. You can find it here.

Try this

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

To hide just use $('.alert').hide();

Check the below example

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

<script src="https://code.jquery./jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn./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>

Easy way is to dismiss an alert inline. for that add .alert-dismissible class to your alert box

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

i modified your code. now data-dismiss="alert" attribute in your button trigger the javaScript functionality. i also added fade show class which gives a smooth animation.

i don't understand what you mean by

hide an alert so that we can have another alert without reloading the page?

本文标签： javascriptBootstrap 4 hide not close alertsStack Overflow