web-dev-qa-db-fra.com

Le message d'alerte Twitter Bootstrap se ferme et s'ouvre à nouveau

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 (fermer), mais lorsque l'utilisateur tente de l'afficher à nouveau (par exemple, cliquez sur le bouton événement), il ne s'affiche pas. (De plus, si j'imprime ce message d'alerte sur 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! Je dois afficher un message d'alerte uniquement après qu'un événement se soit produit (par exemple, un clic sur un bouton). Ou ce que je fais mal?

javascriptjquerytwitter-bootstrapalert
92
user721588

La suppression de données supprime complètement l'élément. Utilisez plutôt la méthode .hide () de jQuery.

La méthode fix-it-quick:

Utiliser 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/

Cela ne devrait cependant être utilisé que si vous êtes paresseux (ce qui n'est pas une bonne chose si vous voulez une application maintenable).

La méthode du bricolage:

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-ignore en data-hide dans le balisage. Exemple à jsfiddle .

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

Ceci cachera tous les éléments avec la classe spécifiée dans data-hide, c'est-à-dire: data-hide="alert" cachera tous les éléments avec la classe d'alerte.

Xeon06 a fourni une solution alternative:

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

Cela ne fera que cacher l'élément parent le plus proche. Ceci est très utile si vous ne voulez pas attribuer à chaque alerte une classe unique. Notez cependant que vous devez placer le bouton de fermeture dans l'alerte.

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

Pour chaque élément de l'ensemble, obtenez le premier élément correspondant au sélecteur en testant l'élément lui-même et en parcourant ses ancêtres dans l'arborescence DOM.

165
Henrik Karlsson

Je viens d'utiliser une variable de modèle pour afficher/masquer la boîte de dialogue et j'ai supprimé le 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>

travaille pour moi et arrête le besoin de sortir à jquery

26
user1661621

Je pense qu'une bonne approche de ce problème serait de tirer parti du type d'événement close.bs.alert de Bootstrap pour masquer l'alerte au lieu de la supprimer. Bootstrap expose ce type d'événement pour pouvoir remplacer le comportement par défaut de suppression de l'alerte du DOM.

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

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/

5
Ohad Schneider

Donc, si vous voulez une solution capable de gérer des pages HTML dynamiques, comme vous l'avez déjà incluse, vous devez utiliser la commande live de jQuery pour définir le gestionnaire sur tous les éléments présents et futurs dans le domaine ou 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>

2
Joschi

Je suis d'accord avec la réponse publiée par Henrik Karlsson et publiée par Martin Prikryl. J'ai une suggestion, basée sur l'accessibilité. J'ajouterais .attr ("aria-hidden", "true") à la fin de celui-ci, afin qu'il ressemble à:

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

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 de fermeture d'alertes bootstrap standard.

Ma solution a été d'écrire un petit plugin jQuery personnalisable qui injecte une alerte Bootstrap 3 correctement formée (avec ou sans bouton de fermeture selon vos besoins) avec un minimum de tracas et vous permettant de la régénérer facilement après la boîte. est fermé.

Voir https://github.com/davesag/jquery-bs3Alert pour l’utilisation, les tests et des exemples.

1
Dave Sag

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 dans JavaScript pur, appliqué à Bootstrap 4. Oui, Bootstrap requiert jQuery pour ses propres codes modal et alertes, mais tout le monde n'écrit plus son propre code avec jQuery.

Voici le code 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 masquée (style="display: none;") et qu'au lieu de la norme data-dismiss="alert", nous avons ici utilisé 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 par programmation ailleurs dans le code, utilisez simplement myAlert.style.display = 'none'; ou myAlert.style.display = 'block';.

0
Jaifroid

Voici une solution basée sur la réponse answer by Henrik Karlsson mais avec le déclenchement approprié de event (basé sur Sources Bootstrap ):

$(function(){
    $('[data-hide]').on('click', function ___alert_hide(e) {
        var $this = $(this)
        var selector = $this.attr('data-target')
        if (!selector) {
            selector = $this.attr('href')
            selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
        }

        var $parent = $(selector === '#' ? [] : selector)

        if (!$parent.length) {
            $parent = $this.closest('.alert')
        }

        $parent.trigger(e = $.Event('close.bs.alert'))

        if (e.isDefaultPrevented()) return

        $parent.hide()

        $parent.trigger($.Event('closed.bs.alert'))
    })
});

La réponse surtout pour moi, comme note.

0
maxkoryukov

J'ai essayé toutes les méthodes et le meilleur moyen pour moi consiste à utiliser les classes de bootstrap intégrées .fade et .in

Exemple:

<div class="alert alert-danger fade <?php echo ($show) ? 'in' : '' ?>" role="alert">...</div>

Remarque: Dans jQuery, ajoutezClass ('in') pour afficher l'alerte, removeClass ('in') pour le masquer.

Fait amusant: cela fonctionne pour tous les éléments. Pas seulement des alertes.

0
clodal

Le problème est causé par l’utilisation du style="display:none", vous devez masquer le alert avec Javascript ou au moins le montrer, supprimer l’attribut style.

0
Plamen Nikolov

Sur la base des autres réponses et de la modification de data-cac en data-hide, cet exemple traite de l'ouverture de l'alerte depuis un lien et permet d'ouvrir et de fermer l'alerte de manière répétée

$('a.show_alert').click(function() {
    var $theAlert = $('.my_alert'); /* class on the alert */
    $theAlert.css('display','block');
   // set up the close event when the alert opens
   $theAlert.find('a[data-hide]').click(function() {
     $(this).parent().hide(); /* hide the alert */
   });
});
0
Charles Wyke-Smith