Как получить элемент invoker Twitter Bootstrap Modal?

у меня есть a элемент для вызова модального:

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

и, скажем, это мой модальный:

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

Я могу привязать функции к событиям уволен модал:

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

мой вопрос: Как я могу получить доступ к a элемент-который вызвал модальный - из моей функции подписчика событий?

5 56
javascript twitter-bootstrap modal-dialog

5 ответов:

это было решено в Bootstrap 3.0.0 благодаря event.relatedTarget.

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

вы должны послушать:

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

вы можете, конечно, заменить show.bs.modal на showed.bs.modal или любое другое событие, которое они запускают. Обратите внимание, что это для Bootstrap 3.0.0. Если вы используете 2.3.2, вам нужно избавиться от. BS. modal (я думаю).

что мне нравится в этом решении: вы не должны помнить, кто это этой, self,это и другие прокси-вызовы обходные пути.

конечно, у вас есть чтобы проверить, не является ли атрибут href реальной связью (опция динамической модальной загрузки).

16

модальный элемент имеет объект данных с именем modal что сохраняет все параметры, которые передаются. Вы можете установить атрибут данных "источник" на элементе, который запускает модальный, установить его в идентификатор источника, а затем получить его позже из options переменной.

триггер будет такой:

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

в случае обратного вызова, получить modal объект данных, и посмотри :

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

в настоящее время он не доступен из коробки. Для этого есть запрос функции и обходной путь, если вы хотите самостоятельно отредактировать загрузочно-модальный код.

посмотреть здесь

1

у меня была ситуация, когда я должен был связать некоторые данные, связанные с "invoker", как вы сказали. Мне удалось решить ее, привязав к ней событие "click" и работая с данными следующим образом:

призывателя

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

JS, чтобы поймать данные, связанные с invoker (просто пример)

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

таким образом, вы можете обрабатывать данные, связанные с вашим invoker в любом случае вы хотите.

1