64

我有一个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…&lt;/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从我的事件订阅者函数中访问调用模态的元素？

4

5 回答 5

109

由于event.relatedTarget.

$('#your-modal').on('show.bs.modal', function (e) {
  var $invoker = $(e.relatedTarget);
});
于 2014-01-23T10:04:35.303 回答
16

你必须听：

$('[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（我认为）。

我喜欢这个解决方案的地方：你不必记住谁是this、self、that和其他代理调用解决方法。

当然，您必须测试 href 属性是否不是真正的链接（动态模式加载选项）。

于 2013-09-23T15:39:31.130 回答
7

modal 元素有一个名为的数据对象modal，它保存所有传递的选项。您可以在触发模式的元素上设置“源”数据属性，将其设置为源的 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
});
于 2014-02-21T15:36:59.493 回答
1

目前，它不能开箱即用。如果您想自己编辑引导模式代码，有一个功能请求和解决方法。

看这里

于 2012-07-31T23:53:26.197 回答
1

就像你说的那样，我遇到了一种情况，我必须绑定一些与“调用者”相关的数据。我设法通过将“点击”事件绑定到它并使用如下数据来解决它：

调用者

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

用于捕获与调用者相关的数据的 JS（只是一些代码示例）

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

像这样，您可以随心所欲地处理与调用者相关的数据。

于 2013-02-14T11:03:25.900 回答