Twitter Bootstrap message d'alerte fermer et ouvrir à nouveau

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

Fonctionne pour moi et arrête le besoin de sortir de jquery

Si vous utilisez une bibliothèque MVVM telle que knockout.js (que je recommande fortement), 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/

Je pense qu'une bonne approche de ce problème serait de profiter du type d'événement close.bs.alert de Bootstrap pour masquer l'alerte au lieu de la supprimer. La raison pour laquelle Bootstrap expose ce type d'événement est que vous pouvez écraser le comportement par défaut de la suppression de l'alerte du DOM.

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

Donc, si vous voulez une solution capable de gérer les pages html dynamiques, comme vous l'incluez déjà, vous devez utiliser live de jQuery pour définir le Gestionnaire sur tous les éléments qui sont maintenant et à l'avenir dans le dom OU être 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>

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

Ma solution était 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 d'agitation et vous permet de le régénérer facilement après la fermeture de la boîte.

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

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

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

LE PROBLÈME EST CAUSÉ PAR l'utilisation du style="display:none", Vous devez masquer l'alerte avec Javascript ou au moins en l'affichant, supprimer l'attribut style.

Basé sur les autres réponses et la modification de data-dismiss en data-hide, cet exemple gère l'ouverture de l'alerte à partir d'un lien et permet à l'alerte d'être ouverte et fermée à plusieurs reprises

$('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 */
   });
});

J'ai essayé toutes les méthodes et la meilleure façon pour moi est d'utiliser les classes Bootstrap intégrées .fade et .in

Exemple:

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

Remarque: En jQuery, addClass('in') pour afficher l'alerte, removeClass('in') pour le cacher.

fait Amusant: Cela fonctionne pour tous les éléments. Pas seulement des alertes.

Voici une solution basée sur la réponse de Henrik Karlsson mais avec déclencheur d'événement (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 une note.