¿Cómo obtener el elemento invocador de Twitter Bootstrap Modal?

Question

Tengo un elemento a de modal invocación:

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

Y, decir que este es mi 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> 

puedo obligar a las funciones de eventos disparados por modal:

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

Mi pregunta es: ¿Cómo puedo acceder al elemento a -que invocó el modal- de mi función de suscriptor de eventos?

Answer 1

Se resolvió en Bootstrap 3.0.0 gracias a event.relatedTarget.

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

Answer 2

Actualmente no está disponible de fábrica. Hay una solicitud de función para ello y una solución alternativa si desea editar el código de arranque-modal usted mismo.

Ver here

Answer 3

tuve una situación en la que tenía que unir algunos datos relacionados con el "invocador", tal como dijiste. He conseguido resolverlo mediante la unión de un evento de "clic" a él y trabajar con los datos como estos:

El invocador

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

El JS para coger los datos relacionados con el invocador (Sólo algunos ejemplo de código)

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

de esta manera, usted puede manejar los datos relacionados con su invocador tantas veces como quiera.

Answer 4

Hay que escuchar a:

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

Por supuesto, puede reemplazar show.bs.modal con shown.bs.modal o cualquier otro evento que el fuego. Tenga en cuenta que esto es para Bootstrap 3.0.0. Si está utilizando 2.3.2 necesita deshacerse de .bs.modal (creo).

Lo que me gusta de esta solución: usted no tiene que recordar que es este, auto, que y otra de proxy llama soluciones.

Por supuesto, debe probar si el atributo href no es un enlace real (la opción de carga modal dinámica).

Answer 5

El elemento modal tiene un objeto de datos denominado modal que guarda todas las opciones que se pasan. Puede establecer un atributo de datos 'fuente' en el elemento que desencadena el modal, configurarlo en el ID de la fuente y luego recuperarlo más tarde desde la variable options.

El disparador sería:

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

En la devolución de llamada caso, obtener el objeto de datos modal, y un vistazo a la opción source:

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