web-dev-qa-db-fra.com

Fermeture automatique de l'alerte bootstrap

Mon besoin est d'appeler alerte lorsque je clique sur le bouton Ajouter à la liste de souhaits et que l'alerte disparaîtra dans 2 secondes C’est ainsi que j’ai essayé, mais l’alerte disparaît instantanément dès qu’elle apparaît. Je ne sais pas où est le bogue. Quelqu'un peut-il m'aider?

JS Script

  $(document).ready (function(){
            $("#success-alert").hide();
            $("#myWish").click(function showAlert() {
                $("#success-alert").alert();
                window.setTimeout(function () { 
                            $("#success-alert").alert('close'); }, 2000);               
                  });       
                    });

Code HTML:

<div class="product-options">
    <a  id="myWish" href=""  class="btn btn-mini" >Add to Wishlist </a>
    <a  href="#" class="btn btn-mini"> Purchase </a>
</div>

Boîte d'alerte:

<div class="alert alert-success" id="success-alert">
    <button type="button" class="close" data-dismiss="alert">x</button>
    <strong>Success! </strong>
    Product have added to your wishlist.
</div>
javascripthtmltwitter-bootstrapalert
123
srikanth_naalla

Pour un glissement en douceur:

$("#success-alert").fadeTo(2000, 500).slideUp(500, function(){
    $("#success-alert").slideUp(500);
});

Fiddle

235
I Can Has Kittenz

Utiliser une fadeTo() qui passe à une opacité de 500 en 2 secondes dans le code de "I Can Has Kittenz" ne m'est pas lisible. Je pense qu'il vaut mieux utiliser d'autres options comme un délai ()

$(".alert").delay(4000).slideUp(200, function() {
    $(this).alert('close');
});
52
Alex Fuentes

Pourquoi toutes les autres réponses, utilisez slideUp me dépasse. Comme j'utilise les classes fade et in pour que l'alerte disparaisse à la fermeture (ou après le délai), je ne veux pas qu'elle "glisse" et entre en conflit avec cela.

De plus, la méthode slideUp n'a même pas fonctionné. L'alerte elle-même n'a pas montré du tout. Voici ce qui a parfaitement fonctionné pour moi:

$(document).ready(function() {
    // show the alert
    setTimeout(function() {
        $(".alert").alert('close');
    }, 2000);
});
28
ADTC

J'ai trouvé que c'était une meilleure solution

$(".alert-dismissible").fadeTo(2000, 500).slideUp(500, function(){
    $(".alert-dismissible").alert('close');
});
18
Jaimie

une solution supplémentaire pour cela Fermez ou supprimez automatiquement le message d’alerte bootstrap après 5 secondes: 

C'est le code HTML utilisé pour afficher le message: 

<div class="alert alert-danger">
This is an example message...
</div>

JS Snippet

<script type="text/javascript">

$(document).ready(function () {
 
window.setTimeout(function() {
    $(".alert").fadeTo(1000, 0).slideUp(1000, function(){
        $(this).remove(); 
    });
}, 5000);
 
});
</script>

10
Divyesh Kanzariya
$("#success-alert").fadeTo(2000, 500).slideUp(500, function(){
    $("#success-alert").alert('close');
});

Où les paramètres fadeTo sont fondus (vitesse, opacité)

1
Marwah Abdelaal

Tiggers automatiquement et manuellement en cas de besoin

$(function () {
    TriggerAlertClose();
});

function TriggerAlertClose() {
    window.setTimeout(function () {
        $(".alert").fadeTo(1000, 0).slideUp(1000, function () {
            $(this).remove();
        });
    }, 5000);
}
0
Arun Prasad E S