Fermeture et réouverture du message d'alerte de Twitter Bootstrap

Question

J'ai un problème avec les messages d'alerte. Il s'affiche normalement, et je peux le fermer lorsque l'utilisateur appuie sur x (fermeture), mais lorsque l'utilisateur essaie de l'afficher à nouveau (par exemple, en cliquant sur l'événement du bouton), il ne s'affiche pas. (De plus, si j'imprime ce message d'alerte dans la console, il est égal à [] .) Mon code est ici :

 <div class="alert" style="display: none">
   <a class="close" data-dismiss="alert">×</a>
   <strong>Warning!</strong> Best check yo self, you're not looking too good.
 </div>

Et événement :

 $(".alert").show();

P.S. ! J'ai besoin de montrer un message d'alerte seulement après qu'un événement se soit produit (par exemple, un bouton cliqué). Ou bien, qu'est-ce que je fais de mal ?

Answer 1

Donc, si vous voulez une solution qui peut faire face aux pages html dynamiques, comme vous l'incluez déjà, vous devriez utiliser jQuery's live pour définir le gestionnaire sur tous les éléments qui sont maintenant et dans le futur dans le dom ou qui sont supprimés.

J'utilise

$(document).on("click", "[data-hide-closest]", function(e) {
  e.preventDefault();
  var $this = $(this);
  $this.closest($this.attr("data-hide-closest")).hide();
});

.alert-success {
    background-color: #dff0d8;
    border-color: #d6e9c6;
    color: #3c763d;
}
.alert {
    border: 1px solid transparent;
    border-radius: 4px;
    margin-bottom: 20px;
    padding: 15px;
}
.close {
    color: #000;
    float: right;
    font-size: 21px;
    font-weight: bold;
    line-height: 1;
    opacity: 0.2;
    text-shadow: 0 1px 0 #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="alert alert-success">
  <a class="close" data-hide-closest=".alert">×</a>
  <strong>Success!</strong> Your entries were saved.
</div>

Answer 2

Toutes les solutions ci-dessus utilisent des bibliothèques externes, soit angular ou jQuery, et une ancienne version de Bootstrap. Voici donc la solution de Charles Wyke-Smith en pur JavaScript appliqué à Bootstrap 4 . Oui, Bootstrap requiert jQuery pour son propre code de modalité et d'alertes, mais tout le monde n'écrit plus son propre code avec jQuery.

Voici le html de l'alerte :

<div id="myAlert" style="display: none;" 
    class="alert alert-success alert-dismissible fade show">
    <button type="button" class="close" data-hide="alert">&times;</button>
    <strong>Success!</strong> You did it!
</div>

Notez qu'initialement l'alerte est cachée ( style="display: none;" ), et au lieu de la norme data-dismiss="alert" nous avons utilisé ici data-hide="alert" .

Voici le JavaScript pour afficher l'alerte et remplacer le bouton de fermeture :

var myAlert = document.getElementById('myAlert');
// Show the alert box
myAlert.style.display = 'block';
// Override Bootstrap's standard close action
myAlert.querySelector('button[data-hide]').addEventListener('click', function() {
    myAlert.style.display = 'none';
});

Si vous souhaitez masquer ou afficher l'alerte de manière programmatique ailleurs dans le code, il vous suffit de procéder comme suit myAlert.style.display = 'none'; o myAlert.style.display = 'block'; .

Answer 3

La solution la plus simple est d'utiliser le aria-hidden comme dans les modales. Essayez ceci :

<div class="alert" style="display: none">
    <a class="close" data-dismiss="alert" aria-hidden="true">×</a>
    <strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>

Answer 4

J'ai rencontré ce problème également et le problème avec le simple piratage du bouton de fermeture est que j'ai toujours besoin d'accéder aux événements standard alert-close du bootstrap.

Ma solution était d'écrire un petit, personnalisable, plugin jquery qui injecte une alerte Bootstrap 3 correctement formée (avec ou sans bouton de fermeture, selon vos besoins) avec un minimum d'efforts et vous permet de la régénérer facilement après la fermeture de la boîte.

Véase https://github.com/davesag/jquery-bs3Alert pour l'utilisation, les tests et les exemples.

Answer 5

Je suis d'accord avec la réponse postée par Henrik Karlsson et modifiée par Martin Prikryl. J'ai une suggestion, basée sur l'accessibilité. J'ajouterais .attr("aria-hidden", "true") à la fin du texte, de manière à ce qu'il ressemble à ceci :

$(this).closest("." + $(this).attr("data-hide")).attr("aria-hidden", "true");