Bootstrap Alerts Data-Dismiss funktioniert nicht

Question

<div class="alert alert-info alert-dismissible fade show"> 
    <button class="close" data-dismiss="alert" aria-label="Close">x</button> 
    Signed out successfully. 
</div> 

Ich kann meine Bootstrap-Warnung nicht mit dem HTML oben schließen. Alles sieht nach den Bootstrap-Dokumenten richtig aus. Ich benutze dies mit einer Rails App.

Können Sie sehen, was ich falsch mache? Wenn nichts mit dem HTML-Code falsch ist, können Sie irgendwelche Ideen anbieten. Ich benutze Rails 5 und Turbolinks 4. Ich kann Ihnen sagen, dass Bootstrap JS und CSS beide korrekt geladen sind.

Answer 1

Ich kann nichts falsch mit Ihrem HTML mark-up sehen.

Also, es lässt mich mit einem Gedanken, ich denke, Sie machen etwas falsch mit den fade show Ereignisse. Sehen Sie, wenn Sie etwas mit diesen Ereignissen tun, die in den Weg des Alarms kommen, schließen Sie Ereignis.

Veröffentlichen Sie Ihr Javascript, dann kann diese einzige Antwort abgeschlossen werden.

Answer 2

Sie müssen der Warnung die beiden Klassen fade und in hinzufügen.

Ihre Benachrichtigungen Animation haben verwenden beim Schließen, sicherstellen, dass sie ihnen die .fade und .in Klassen bereits angewendet haben.

Siehe Alert.js Usage aus den Docs.

Dies ist die CSS, die angewendet wird ist:

.fade.in { 
    opacity: 1 
} 

.fade { 
    opacity: 0; 
    -webkit-transition: opacity .15s linear; 
    -o-transition: opacity .15s linear; 
    transition: opacity .15s linear 
} 

Arbeitsbeispiel:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="alert alert-info alert-dismissible fade in" role="alert"> 
 
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span> 
 
    </button> 
 
    Signed out successfully 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>