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

Data-dismiss supprime complètement l'élément. Utilisez plutôt la méthode .hide() de jQuery.

La méthode de réparation rapide :

En utilisant le javascript en ligne pour cacher l'élément onclick comme ceci :

<div class="alert" style="display: none"> 
    <a class="close" onclick="$('.alert').hide()">×</a>  
    <strong>Warning!</strong> Best check yo self, you're not looking too good.  
</div>

<a href="#" onclick="$('alert').show()">show</a>

http://jsfiddle.net/cQNFL/

Cette méthode ne doit cependant être utilisée que si vous êtes paresseux (ce qui n'est pas une bonne chose si vous voulez une application maintenable).

La méthode du "tout faire" :

Créez un nouvel attribut de données pour masquer un élément.

Javascript :

$(function(){
    $("[data-hide]").on("click", function(){
        $("." + $(this).attr("data-hide")).hide()
        // -or-, see below
        // $(this).closest("." + $(this).attr("data-hide")).hide()
    })
})

puis changez data-dismiss en data-hide dans le balisage. Exemple chez jsfiddle .

$("." + $(this).attr("data-hide")).hide()

Cela masquera tous les éléments ayant la classe spécifiée dans data-hide, c'est-à-dire data-hide="alert" masquera tous les éléments ayant la classe d'alerte.

Xeon06 a fourni une solution alternative :

$(this).closest("." + $(this).attr("data-hide")).hide()

Cela ne masquera que l'élément parent le plus proche. C'est très utile si vous ne voulez pas donner à chaque alerte une classe unique. Notez toutefois que vous devez placer le bouton de fermeture à l'intérieur de l'alerte.

Définition de .closest à partir de doc jquery :

Pour chaque élément de l'ensemble, on obtient le premier élément qui correspond au sélecteur en testant l'élément lui-même et en parcourant ses ancêtres dans l'arbre DOM.

Answer 2

J'ai simplement utilisé une variable de modèle pour afficher/masquer la boîte de dialogue et j'ai supprimé l'option data-dismiss="alert"

Exemple :

<div data-ng-show="vm.result == 'error'" class="alert alert-danger alert-dismissable">
    <button type="button" class="close" data-ng-click="vm.result = null" aria-hidden="true">&times;</button>
    <strong>Error  !  </strong>{{vm.exception}}
</div>

fonctionne pour moi et évite d'avoir à sortir de jquery

Answer 3

Je pense qu'une bonne approche de ce problème consisterait à tirer parti de la fonction de bootstrap close.bs.alert pour masquer l'alerte au lieu de la supprimer. La raison pour laquelle Bootstrap expose ce type d'événement est que vous pouvez remplacer le comportement par défaut qui consiste à supprimer l'alerte du DOM.

$('.alert').on('close.bs.alert', function (e) {
    e.preventDefault();
    $(this).addClass('hidden');
});

Answer 4

Si vous utilisez une bibliothèque MVVM telle que knockout.js (que je recommande vivement), vous pouvez le faire plus proprement :

<div class="alert alert-info alert-dismissible" data-bind="visible:showAlert">
   <button type="button" class="close" data-bind="click:function(){showAlert(false);}>
        <span aria-hidden="true">&times;</span>
        <span class="sr-only">Close</span>
   </button>
   Warning! Better check yourself, you're not looking too good.
</div>

http://jsfiddle.net/bce9gsav/5/

Answer 5

C'est ce qui a le mieux fonctionné pour moi :

$('.alert').on('close.bs.alert', function (e) {
    e.preventDefault();
    $(this).hide();
});