Fermeture automatique de l'alerte d'amorçage


154

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

Script JS

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


J'ai essayé ces flux .. mais je ne sais pas comment les mettre en œuvre. : /
srikanth_naalla

Réponses:


276

Pour un glissement fluide:

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

$(document).ready(function() {
  $("#success-alert").hide();
  $("#myWish").click(function showAlert() {
    $("#success-alert").fadeTo(2000, 500).slideUp(500, function() {
      $("#success-alert").slideUp(500);
    });
  });
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="product-options">
  <a id="myWish" href="javascript:;" class="btn btn-mini">Add to Wishlist </a>
  <a href="" class="btn btn-mini"> Purchase </a>
</div>
<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>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


3
Cela ne fonctionne pas la deuxième fois que vous avez cliqué sur le bouton. À cause de l'alerte ('close') Si vous utilisez slideUp () ça marche @ICanHasKittenz
Fatih Alp

Fonctionne très bien, mais c'est quoi cette ligne $ ("# success-alert"). Alert (); usage? Je l'ai supprimé et fonctionne aussi.
Roberto Sepúlveda Bravo

1
@ RobertoSepúlvedaBravo c'est pour donner la fonctionnalité de fermeture à la boîte d'alerte mais vous avez raison, ce n'est pas nécessaire ici car nous utilisons l' data-dimiss="alert" attribut. Mettra à jour le script.
AyB

N'a pas travaillé pour moi. Cependant, les autres exemples ci-dessous ont bien fonctionné.
Terje Nesthus

@TerjeNesthus Pouvez-vous expliquer ce qui n'a pas fonctionné exactement? L'alerte ne glisse pas? Ou ça ne marche pas la deuxième fois? Puis-je connaître la version de votre bootstrap? C'était censé être pour Bootstrap 3 et je ne les ai pas testés sur les versions ultérieures.
AyB

56

Utiliser un fadeTo()qui s'estompe à 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 delay ()

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

42

La raison pour laquelle toutes les autres réponses utilisent slideUpest juste au-delà de moi. Comme j'utilise les classes fadeet inpour que l'alerte disparaisse lorsqu'elle est fermée (ou après l'expiration du délai), je ne veux pas qu'elle «glisse» et entre en conflit avec cela.

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

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

1
Court et doux
Nawaraj

21

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

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

11

une autre solution pour cela Fermez ou disparaissez automatiquement le message d'alerte de bootstrap après 5 secondes:

Voici le code HTML utilisé pour afficher le message:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

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


<script type="text/javascript">

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


C'est une très bonne réponse car elle ne se limite pas à afficher le message tru JS, le message pourrait déjà être affiché lorsque la page se charge.
Guillermo Oramas R.

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

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


1

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

C'est une bonne approche pour afficher l'animation à l'intérieur et à l'extérieur à l'aide de jQuery

  $(document).ready(function() {
      // show the alert
      $(".alert").first().hide().slideDown(500).delay(4000).slideUp(500, function () {
         $(this).remove(); 
      });
  });

0

Contrôleur C #:

var result = await _roleManager.CreateAsync(identityRole);
   if (result.Succeeded == true)
       TempData["roleCreateAlert"] = "Added record successfully";

Page de rasoir:

@if (TempData["roleCreateAlert"] != null)
{
    <div class="alert alert-success">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
        <p>@TempData["roleCreateAlert"]</p>
    </div>
}

Toute fermeture automatique d'alerte:

<script type="text/javascript">
    $(".alert").delay(5000).slideUp(200, function () {
        $(this).alert('close');
    });
</script>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.