Bootstrap 4 ausblenden nicht schließen Warnungen

Question

Wie der Titel besagt, möchte ich die beste Möglichkeit, eine Warnung zu verbergen, so dass wir eine andere Warnung haben, ohne die Seite neu laden können. Es gibt mehrere Antworten auf hier für BS3, aber ich hoffe, dass es eine bessere Lösung für BS4 gibt.
Hier ist mein 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> 

Und ich bin mit dieser die Warnung geöffnet auszulösen:

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

Answer 1

Versuchen Sie, diese

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

Answer 2

nur $('.alert').hide(); auszublenden verwenden

Überprüfen Sie das folgende Beispiel

$('.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 3

einfache Art und Weise ist eine Warnung inline zu entlassen. für die .alert-dismissible Klasse Ihrer 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> 

hinzufügen geändert i Code. Jetzt data-dismiss="alert" Attribut in Ihrer Schaltfläche die javaScript-Funktionalität auslösen. Ich fügte auch fade show Klasse hinzu, die eine glatte Animation gibt.

Ich verstehe nicht, was Sie von

bedeuten verstecken eine Warnung, so dass wir einen weiteren Alarm ohne Neuladen der Seite haben?