Come ottenere l'elemento di invoker di Twitter Bootstrap Modal?

Question

Ho un elemento a per modale invocare:

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

E, dire che questo è il mio 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> 

posso associare funzioni per eventi generati da modale:

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

La mia domanda è: Come posso accedere all'elemento a -che ha richiamato il modale- dalla funzione di sottoscrizione evento del mio evento?

Answer 1

È stato risolto in Bootstrap 3.0.0 grazie a event.relatedTarget.

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

Answer 2

Attualmente non è disponibile immediatamente. Esiste una richiesta di funzionalità e una soluzione alternativa per modificare autonomamente il codice modale di bootstrap.

Vedi here

Answer 3

ho avuto una situazione in cui ho dovuto legare alcuni dati relativi alla "invoker", proprio come hai detto. Sono riuscito a risolverlo legando un evento "click" ad esso e lavorare con i dati in questo modo:

L'invoker

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

Il JS per la cattura dei dati relativi al invoker (Solo qualche esempio di codice)

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

In questo modo, è possibile gestire i dati relativi al vostro invoker comunque si desidera.

Answer 4

Devi ascoltare:

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

Ovviamente si può sostituire con show.bs.modal shown.bs.modal o qualsiasi altro evento sparano. Si noti che questo è per Bootstrap 3.0.0. Se stai usando 2.3.2 devi liberarti di .bs.modal (penso).

Quello che mi piace di questa soluzione: non c'è bisogno di ricordare chi è questo, sé, che e altre procura chiama soluzioni alternative.

Ovviamente, è necessario verificare se l'attributo href non è un collegamento reale (l'opzione di caricamento modale dinamico).

Answer 5

L'elemento modale ha un oggetto dati denominato modal che salva tutte le opzioni che sono passati. È possibile impostare un attributo di dati 'origine' sull'elemento che attiva la modale, impostarla sull'ID della sorgente e quindi recuperarla in seguito dalla variabile options.

L'innesco sarebbe:

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

Nel callback di evento, ottenere l'oggetto di dati modal, e guardare l'opzione source:

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