web-dev-qa-db-fra.com

Comment obtenir Twitter Bootstrap Élément invocateur de Modal?

J'ai un élément a pour invoquer le modal:

<a class="btn" data-toggle="modal" data-target="#myModal" href="http://some-url" >Launch Modal</a>

Et disons que c'est mon modal:

<div class="modal hide" id="myModal">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>

Je peux lier des fonctions à des événements déclenchés par modal:

$('#myModal').on('hidden', function () {
  // do something…
})

Ma question est: comment puis-je accéder à l'élément a -qui a appelé le modal- à partir de ma fonction d'abonné aux événements?

javascripttwitter-bootstrapmodal-dialog
60
cnkt

Il a été résolu dans Bootstrap 3.0.0 grâce à event.relatedTarget.

$('#your-modal').on('show.bs.modal', function (e) {
  var $invoker = $(e.relatedTarget);
});
100
lou

Vous devez écouter:

$('[data-toggle="modal"]').on('click', function() {
    $($(this).attr('href')).data('trigger', this);
});
$('.modal').on('show.bs.modal', function() {
    console.log('Modal is triggered by ' + $(this).data('trigger'));
});

Vous pouvez bien sûr remplacer show.bs.modal par shown.bs.modal ou tout autre événement déclenché. Notez que c'est pour Bootstrap 3.0.0. Si vous utilisez 2.3.2, vous devez vous débarrasser de .bs.modal (Je pense).

Ce que j'aime dans cette solution: vous n'avez pas à vous rappeler qui est cette, soi, cette et d'autres solutions de contournement d'appels proxy.

Bien sûr, vous devez tester si l'attribut href n'est pas un vrai lien (l'option de chargement modal dynamique).

16
Alex

L'élément modal possède un objet de données nommé modal qui enregistre toutes les options transmises. Vous pouvez définir un attribut de données "source" sur l'élément qui déclenche le modal, le définir sur l'ID de la source, puis le récupérer ultérieurement à partir de la variable options.

Le déclencheur serait:

<a id="launch-modal-1" class="btn" data-toggle="modal" data-target="#myModal" href="http://some-url" data-source="#launch-modal-1">Launch Modal</a>

Dans le rappel d'événement, récupérez l'objet de données modal et regardez l'option source:

$('#myModal').on('hidden', function () {
  var modal = $(this).data('modal');
  var $trigger = $(modal.options.source);
  // $trigger is the #launch-modal-1 jQuery object
});
7
user2109658

Actuellement, il n'est pas disponible en sortie de boîte. Il existe une demande de fonctionnalité et une solution de contournement si vous souhaitez modifier le code bootstrap-modal vous-même.

Voir ici

1
SummerDew

J'ai eu une situation où je devais lier certaines données liées à "l'invocateur", comme vous l'avez dit. J'ai réussi à le résoudre en lui liant un événement "clic" et en travaillant avec les données comme ceci:

L'invocateur

<img id="element" src="fakepath/icon-add.png" title="add element" data-toggle="modal" data-target="#myModal" class="add">

Le JS pour attraper les données liées à l'invocateur (Juste un exemple de code)

$('#element').on('click', function () { // Had to use "on" because it was ajax generated content (just an example)
    var self = $(this);
});

Comme ça, vous pouvez gérer les données liées à votre invocateur comme vous le souhaitez.

1
darksoulsong