如何获得Twitter Bootstrap Modal的调用元素？

Question

我有一个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>

我可以将函数绑定到由modal触发的事件:

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

我的问题是:如何a从我的事件订阅者函数访问元素 - 它调用模态？

Answer 1

它在Bootstrap 3.0.0中解决了,谢谢event.relatedTarget.

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

Answer 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'));
});

您当然可以用shown.bs.modal或它们触发的任何其他事件替换show.bs.modal.请注意,这适用于Bootstrap 3.0.0.如果您使用2.3.2,则需要摆脱.bs.modal(我认为).

我喜欢这个解决方案是什么:你不必记得谁是这个,自我,这和其他代理调用的解决方法.

当然,您必须测试href属性是否不是真正的链接(动态模态加载选项).

Answer 3

modal元素有一个名为的数据对象modal,用于保存传递的所有选项.您可以在触发模态的元素上设置'source'数据属性,将其设置为源的ID,然后从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
});