Twitter Bootstrap Modal Événement à ne Pas Déclenché Quand Modale est Affichée

Selon les docs:

http://getbootstrap.com/javascript/#modals

Il faut tirer les méthodes show".bs.liste déroulante" et "montré.bs.liste déroulante". Mais il n'a pas d':

HTML:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">Hello world</div>
    </div>
</div>

jQuery:

//show.bs.modal doesn't work either

$('#myModal')
    .modal('show')
    .on('show.bs.modal', function() {

        alert('shown baby!');

    });

OriginalL'auteur TK123 | 2013-10-29

25

Youe devez d'abord vous inscrire événement déclenche alors il
```
$('#myModal')
    .on('show.bs.modal', function() {

        alert('shown baby!');

    }).modal('show');
```
jsfiddle

Ahh ok, fait sens. Je ne savais pas que je devais l'enregistrer moi-même, je pensais que le core plugin a déclenché. Je pense que c'est la façon dont il l'habitude de travailler avec la version précédente.
Cette réponse nécessite plus d'attention. J'ai rencontré un problème similaire de forcer un modal ouverte basée sur certaines conditions. M'a fallu un peu de creuser pour trouver ce était la façon de le faire.

OriginalL'auteur Ajeet Sinha

Quand il arrive

Événement .bs.modal n'est pas déclenché lorsque modal a aussi la classe "fade". Alors que les show.bs.modal fonctionne toujours.
Voir https://github.com/twbs/bootstrap/issues/11793

HTML:

<div class="modal fade" id="first" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">Hello world from first modal</div>
    </div>
</div>
<div class="modal" id="second" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">Hello world from second modal</div>
    </div>
</div>

jQuery:

$('.modal').on('shown.bs.modal', function() {
    //fired only in second modal
    console.info('shown.bs.modal');
});

$('.modal').on('show.bs.modal', function() {
    //fired always
    console.info('show.bs.modal');
});

Solution

Pour bootstrap v3.3.6 remplacer la ligne 1010 avec:

that.$element //wait for modal to slide in

Quel est le problème

Regarder lignes 1006-1015:

  var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget })

  transition ?
    that.$dialog //wait for modal to slide in
      .one('bsTransitionEnd', function () {
        that.$element.trigger('focus').trigger(e)
      })
      .emulateTransitionEnd(Modal.TRANSITION_DURATION) :
    that.$element.trigger('focus').trigger(e)

Sans transition (pas de fondu de classe) l'événement e est déclenchée immédiatement (.$l'élément).
Avec la transition, je ne sais pas exactement pourquoi, mais de toute façon le bsTransationEnd événement à partir de la fonction emulateTransitionEnd n'est pas géré par le .$la boîte de dialogue.un(). Mais avec .$l'élément, tout semble fonctionner.

OriginalL'auteur rzehan

3

Chose de similaire qui m'est arrivé et je l'ai résolu en utilisant setTimeout.

Bootstrap est l'aide de l'délai suivantes pour compléter montrant:

c.TRANSITION_DURATION=300,c.BACKDROP_TRANSITION_DURATION=150,

Donc l'utilisation de plus de 300 doit travailler et pour moi 200 de travail:
```
$('#myModal').on('show.bs.modal', function (e) {
    setTimeout(function(){
        //Do something if necessary
    }, 300);                        
})
```
Même 150 marche aussi 🙂
150 - dépend de ce qui est le fade-in/fade-out pour le modal. Par défaut, elle est de 150 ms. Pour la sécurité je ne l'utiliserais 160 ms pour setTimeout.
Merci beaucoup! Il a travaillé!

OriginalL'auteur itsazzad
1

vous avez oublié le "n" sur l'montré
```
$(document).ready(function(){
    $('#myModal')
.modal('show')
.on('shown.bs.modal', function() {

    alert('shown baby!');

});

});
```
Les deux sont des événements. show.bs.modal déclenche immédiatement; shown.bs.modal feux après le modal a disparu.

OriginalL'auteur Mirza Selimovic
0

Utiliser en lieu et place de votre personnalisé sélecteur. Les deux sont illustrés.bs.modal et le spectacle.bs.modal fonctionnent très bien
```
$(document).on('shown.bs.modal', '.modal', function() {
    alert();
});
```
OriginalL'auteur ymakux
0

Au cas où quelqu'un tombe sur ce problème, assurez-vous de crochet le sur hidden /shown événement avant la cuisson de la toggle de la modale. C'est, déclare ceci:
```
$("#selector").on("hidden.bs.modal", function () {
    //do the right thing
});     
```
Avant d'appeler la bascule de l'modal, par exemple:
```
("#selector").modal("toggle");
```
Je sais que c'est de base, mais dans un alambiquée le code qu'il se passe.

OriginalL'auteur Alejandro Pablo Tkachuk

J'ai trouvé une solution qui fonctionne avec .fade transitions:

$(document).on($.support.transition.end, '.modal.fade.in', function(e) {
  var $target = $(e.target);
  if ($(e.target).is(".modal-dialog")) {
    console.log("Modal Shown")
  }
});

$(document).on($.support.transition.end, '.modal.fade', function(e) {
  var $target = $(e.target);
  if (!$target.is(".modal.fade.in") && !$target.is(".modal-dialog")) {
    console.log("Modal Hidden")
  }
});

OriginalL'auteur holmescn

Si votre modal est dynamiquement créée, sélectionnez la plus proche statique de l'élément parent et ajouter votre modale en tant que paramètre de bootstrap modale des événements de travail:

/* body is static, .modal is not */

$("body").on('shown.bs.modal', '.modal', function() {

    alert('shown');

});


$("body").on('hidden.bs.modal', '.modal', function() {

    alert('hidden');

});


$("body").on('show.bs.modal', '.modal', function() {

    alert('show');

});


$("body").on('hide.bs.modal', '.modal', function() {

    alert('hide');

});

OriginalL'auteur Eric Amshukov

Vous devez vous connecter pour publier un commentaire.