Jak zdobyć element Invoker na Twitterze Bootstrap Modal?

Question

Mam element a wywoływania modalnym:

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

I powiedzieć, że to moja modalne:

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

mogę powiązać funkcje do zdarzeń opalanych modalne:

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

Moje pytanie brzmi: Jak mogę uzyskać dostęp do elementu a, który wywołał modal - z funkcji subskrybowania zdarzeń?

Answer 1

Został rozwiązany w Bootstrap 3.0.0 dzięki event.relatedTarget.

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

Answer 2

Obecnie nie jest dostępna po wyjęciu z pudełka. Istnieje żądanie funkcji i obejście, jeśli chcesz samodzielnie zmodyfikować kod bootstrap-modalny.

Zobacz here

Answer 3

miałem sytuację, w której musiałem wiązać pewne dane związane z „wywołał”, tak jak pan powiedział. udało mi się go rozwiązać poprzez wiązanie „kliknięcie” wydarzenie do niego i pracy z danymi tak:

wywołującego

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

JS złapać dane dotyczące wywołującego (Tylko niektóre przykładowy kod)

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

Jak to można obsługiwać dane dotyczące Twojej wywołującego tak chcesz.

Answer 4

Trzeba posłuchać:

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

można oczywiście zastąpić show.bs.modal z shown.bs.modal lub jakiekolwiek inne zdarzenie oni ogień. Należy zauważyć, że dotyczy to Bootstrap 3.0.0. Jeśli używasz 2.3.2, musisz pozbyć się .bs.modal (jak sądzę).


Co podoba mi się w tym rozwiązaniu: nie musisz pamiętać, kto jest ten, self, że i inne rozwiązania zastępcze wywołań.

Oczywiście należy sprawdzić, czy atrybut href nie jest rzeczywistym łączem (opcja dynamicznego ładowania modalnego).

Answer 5

Element modalna ma obiektu danych o nazwie modal który zapisuje wszystkie opcje, które są przekazywane. Możesz ustawić atrybut danych źródłowych na elemencie, który wyzwala modal, ustawić go na identyfikator źródła, a następnie pobrać go później ze zmiennej options.

Spust byłoby:

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

W zwrotnego zdarzeń, uzyskać obiektu modal danych, i spojrzeć na opcji source:

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