Как получить Twitter-бутстрап Модальный элемент invoker?

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

<a class="btn" data-toggle="modal" data-target="#myModal" href="#" onclick="location.href='http://some-url'; return false;" >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, который вызвал модальную функцию из моей функции подписчика событий?

Ответ 1

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

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

Ответ 2

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

$('[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 на show.bs.modal или любое другое событие, которое они запускают. Обратите внимание, что это для Bootstrap 3.0.0. Если вы используете 2.3.2, вам нужно избавиться от .bs.modal (я думаю).

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

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

Ответ 3

Модальный элемент имеет объект данных с именем 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 и посмотрите на параметр source:

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

Ответ 4

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

Смотрите здесь

Ответ 5

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

Invoker

<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, в любом случае.