Comment afficher/masquer une alerte spécifique avec twitter bootstrap ?

Question

Voici un exemple d'alerte que j'utilise :

<div class="alert alert-error" id="passwordsNoMatchRegister">
  <span>
    <p>Looks like the passwords you entered don't match!</p>
  </span>
</div>

Je sais que $(".alert").show() y $(".alert").hide() affichera/masquera tous les éléments de l .alert classe. Cependant, je ne parviens pas à trouver comment masquer une alerte spécifique, compte tenu de son identifiant.

Je veux éviter d'utiliser .alert("close") car cela supprime définitivement l'alerte, et je dois pouvoir la rappeler.

Answer 1

Vous devez utiliser un sélecteur d'identité :

 //show
 $('#passwordsNoMatchRegister').show();
 //hide
 $('#passwordsNoMatchRegister').hide();

# est un sélecteur d'identité et passwordsNoMatchRegister est l'identifiant de la division.

Answer 2

Ajoutez la classe "collapse" à la div d'alerte et l'alerte sera "collapsed" (cachée) par défaut. Vous pouvez toujours l'appeler en utilisant "show".

<div class="alert alert-error collapse" role="alert" id="passwordsNoMatchRegister">
  <span>
  <p>Looks like the passwords you entered don't match!</p>
  </span>
</div>

Answer 3

En plus de toutes les réponses précédentes, n'oubliez pas de masquer votre alerte avant de l'utiliser avec un simple style="display:none;"

<div class="alert alert-success" id="passwordsNoMatchRegister" role="alert" style="display:none;" >Message of the Alert</div>

Alors, utilisez l'un ou l'autre :

$('#passwordsNoMatchRegister').show();

$('#passwordsNoMatchRegister').fadeIn();

$('#passwordsNoMatchRegister').slideDown();

Answer 4

J'utilise cette alerte

function myFunction() {
   $('#passwordsNoMatchRegister').fadeIn(1000);
   setTimeout(function() { 
       $('#passwordsNoMatchRegister').fadeOut(1000); 
   }, 5000);
}

<link rel="stylesheet" href="http://stackoverflow.com//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<button onclick="myFunction()">Try it</button> 

<div class="alert alert-danger" id="passwordsNoMatchRegister" style="display:none;">
    <strong>Error!</strong> Looks like the passwords you entered don't match!
  </div>

Answer 5

J'utilise cette alerte

<div class="alert alert-error hidden" id="successfulSave">
  <span>
    <p>Success! Result Saved.</p>
  </span>
</div>

de manière répétée sur une page chaque fois qu'un utilisateur met à jour un résultat avec succès :

$('#successfulSave').removeClass('hidden');

pour le cacher à nouveau, j'appelle

$('#successfulSave').addClass('hidden');