web-dev-qa-db-fra.com

Comment savoir quel bouton est cliqué lorsque le modal bootstrap se ferme?

Voici mon code html modal:

<div class="modal fade" id="delete-file-modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <form class="form-horizontal" method="post" id="delete_file_form">

                <div class="modal-body">
                    Are you sure you want to delete this file?  
                </div>  

                <div class="modal-footer">
                    <button data-dismiss="modal" class="btn btn-danger" name="in_confirm_insert" id="confirm-delete-button">Delete</button>
                    <button data-dismiss="modal" class="btn btn-default" name="in_confirm_insert" id="cancel-delete-button">Cancel</button>
                </div>

            </form>
        </div>
    </div>
</div>

et voici mon code javascript:

$('#delete-file-modal').on('hidden.bs.modal', function (e) {

    var delete_button = $(e.target).is("#confirm-delete-button");

    if(delete_button === true) {
        //delete file
        alert("file deleted.");
    } else {
        alert("delete failed.");
    };
});

Je dois être en mesure de vérifier si le bouton Supprimer est cliqué lorsque le fichier de suppression-modal est fermé. Est-ce qu'il manque quelque chose d'autre dans mon code javascript?

javascriptjqueryhtmltwitter-bootstrap
34
Nomad

Option 1

Dans l'écouteur d'événement hidden.bs.modal, event.target Fait référence à l'élément modal qui est masqué, pas l'élément cliqué qui a déclenché l'événement.

Si vous souhaitez déterminer quel bouton a déclenché la fermeture du modal, une option consiste à ajouter des écouteurs d'événements aux éléments du bouton à l'intérieur du modal. Ensuite, à l'intérieur de l'écouteur d'événements de bouton, vous pouvez écouter l'événement hidden.bs.modal Sur l'élément parent #modal Afin de déterminer si le modal a été fermé. Étant donné que l'écouteur d'événement hidden.bs.modal Se trouve à l'intérieur du bouton écouteur d'événement click, vous avez toujours une référence à l'élément qui a déclenché l'événement click.

Exemple ici 

$('#delete-file-modal .modal-footer button').on('click', function(event) {
  var $button = $(event.target); // The clicked button

  $(this).closest('.modal').one('hidden.bs.modal', function() {
    // Fire if the button element 
    console.log('The button that closed the modal is: ', $button);
  });
});

Il convient également de mentionner que la méthode .one() ne déclenchera l'événement qu'une fois à chaque fois qu'il est attaché (ce qui est exactement ce que nous voulons). Sinon, si vous avez utilisé .on() ou .click() pour attacher l'événement, l'événement pourrait se déclencher plusieurs fois car il est réattaché chaque fois que l'écouteur d'événement click est déclenché.

Option 2

Selon la documentation Bootstrap pertinente , les événements show.bs.modal/shown.bs.modal Ont une propriété relatedTarget attachée à l'événement.

S'il est provoqué par un clic, l'élément cliqué est disponible en tant que propriété relatedTarget de l'événement.

Ainsi, vous pouvez déterminer l'élément qui a déclenché l'événement modal à ouvrir en accédant à event.relatedTarget À l'intérieur de l'écouteur d'événement show modal:

Exemple ici 

$('#delete-file-modal').on('show.bs.modal', function (event) {
    console.log(event.relatedTarget);
});

Gardez à l'esprit que la propriété relatedTarget n'est associée qu'aux événements show modaux. Ce serait bien s'ils avaient une propriété comme celle associée aux événements hide.bs.modal/hidden.bs.modal. Au moment d'écrire ces lignes, il n'y a actuellement pas.

Option n ° 3

Comme Andrew l'a souligné dans les commentaires sous cette réponse, vous pouvez également vérifier quel élément de la page est ciblé en accédant à document.activeElement .

Dans l'extrait ci-dessous, un écouteur d'événement est attaché à l'élément modal pour les événements d'affichage et de masquage. Lorsque l'événement est déclenché, une vérification est effectuée pour voir si l'élément actuellement concentré sur possède un attribut [data-toggle] Ou [data-dismiss] (Ce qui implique qu'il a effectivement déclenché l'événement).

Exemple ici 

$('#delete-file-modal').on('hide.bs.modal show.bs.modal', function(event) {
  var $activeElement = $(document.activeElement);

  if ($activeElement.is('[data-toggle], [data-dismiss]')) {
    console.log($activeElement);
  }
});

Si vous écoutez les deux événements afficher/masquer, comme dans l'exemple ci-dessus, et que vous souhaitez différencier les événements, vous pouvez cocher event.type:

Exemple ici 

$('#delete-file-modal').on('hide.bs.modal show.bs.modal', function(event) {
  var $activeElement = $(document.activeElement);

  if ($activeElement.is('[data-toggle], [data-dismiss]')) {
    if (event.type === 'hide') {
      // Do something with the button that closed the modal
      console.log('The button that closed the modal is: ', $activeElement);
    }

    if (event.type === 'show') {
      // Do something with the button that opened the modal
      console.log('The button that opened the modal is: ', $activeElement);
    }
  }
});
50
Josh Crozier

Cela fonctionne aussi:

$('#myModal').on('hide.bs.modal', function (e) { 
var tmpid = $(document.activeElement).attr('id'); alert(tmpid); 
});

Il n'obtiendra pas l'identifiant du "X" sur le modal à moins que vous ne l'identifiiez. Renvoie l'identifiant de l'élément qui déclenche la fermeture du modal ....

5
Andrew

Pour prolonger la réponse de @ JoshCrozier:

Ce serait bien s'ils avaient une propriété comme celle associée aux événements hide.bs.modal/hidden.bs.modal. Au moment d'écrire ces lignes, il n'y a actuellement pas

Cela émulera un comportement similaire, qui attache le bouton cliqué comme relatedTarget pour les auditeurs ultérieurs:

$( '.modal-footer .btn[data-dismiss="modal"]' ).on( 'click', function() {
    var target = this

    $( target ).closest( '.modal' )
        .one( 'hide.bs.modal hidden.bs.modal', function( event ) {
            event.relatedTarget = target
        } )
} )

Le sélecteur et l'écouteur peuvent être optimisés en fonction de la façon dont les modaux sont utilisés dans un projet. Par exemple: si vous savez que vous n'utiliserez pas hide.bs.modal, Vous pouvez simplement modifier l'événement de hidden.bs.modal À la place.

2
Katai

La réponse @ JoshCrozier est bonne et utile mais parfois nous devons Déterminer l'élément de sorcière a déclenché le modal à ouvrir/fermer APRÈS qu'il a été fermé . ( @ Nomad l'a mentionné dans les commentaires ci-dessous le @ JoshCrozier réponse).

Parfois aussi, nous devons déterminer quel lien ou bouton dans le body ou header a déclenché la fermeture du modal (pas seulement les boutons dans le footer).

Alors j'écris cette solution à mix @ JoshCrozier and @ Katia répond à ma façon et améliore la solution finale:

Ajoutez cette partie aux scripts de votre page:

$('body').on('click','.modal .dismiss-modal', function() {
    var closeRelatedTarget = this;
    var $modal = $(closeRelatedTarget).closest('.modal');
    $modal.one('hide.bs.modal hidden.bs.modal', function(event) {
        $modal.data('closeRelatedTarget',closeRelatedTarget);
    });
    $modal.data('closeRelatedTarget','wait');
    $modal.modal('hide');
});
$('body').on('show.bs.modal','.modal', function(event){
    $(this).data('closeRelatedTarget','anElement');
    $(this).data('showRelatedTarget',event.relatedTarget);
});

Maintenant, utilisez-le facilement avec de simples gestionnaires d'événements ou obtenez l'élément cible:

● Déterminer que l'élément de sorcière a déclenché le modal pour afficher sur show et shown (An embed Bootstrap feature) :

 $('#MyModal').on('show.bs.modal', function (event) {
     console.log(event.relatedTarget);
 });

et

 $('#MyModal').on('shown.bs.modal', function (event) {
     console.log(event.relatedTarget);
 });

● Déterminer que l'élément de sorcière a déclenché le modal pour fermer sur hidden

 $('#BuyModal').on('hidden.bs.modal', function (event) {
      if($(this).data('closeRelatedTarget')=='wait')
      {return;}

      console.log($('#MyModal').data('closeRelatedTarget'));
 });

● Déterminer que l'élément de sorcière a déclenché le modal pour afficher même après la fermeture du modal

 console.log($('#MyModal').data('showRelatedTarget'));

● Déterminer que l'élément de sorcière a déclenché le modal pour fermer même après la fermeture du modal

 console.log($('#MyModal').data('closeRelatedTarget'));

Remarque: Au lieu de data-dismiss="modal" propriété utilise mon modal-dismiss classe à chaque élément du modèle que vous pouvez fermer le modèle et vous voulez le déterminer (N'utilisez pas les deux modal-dismiss classe et data-dismiss="modal" ensemble).

Exemple:<a href="/more_info.html" class="dismiss-modal">More info</a>

Pourquoi? Parce que data-dismiss="modal" fermez le modèle et déclenchez hide et hidden avant de définir closeRelatedTarget.

1
RAM

Nous y pensons trop. C'est aussi simple qu'un gestionnaire de boutons standard. La donnée-rejeter = "modal" fera disparaître la boîte de dialogue, et nous saurons toujours que le bouton qui nous intéressait a été cliqué.

$('#delete-file-modal').on('click','#delete-file-modal #confirm-delete-button', function (e) {
  e.preventDefault();
  console.log('confirmed delete');
  return false;
});
0
Volomike