如何获得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元素，它调用了模式 –

Answer 1

这是由于event.relatedTarget在Bootstrap 3.0.0中解决的。

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

你当然可以用show.bs.modal或其他任何事件replaceshow.bs.modal。 请注意，这是Bootstrap 3.0.0。 如果你使用2.3.2，你需要摆脱.bs.modal （我认为）。

我喜欢这个解决scheme：你不必记得这是谁， 自我 ，以及其他代理服务器的解决方法。

当然，你必须testinghref属性是不是一个真正的链接（dynamic模态加载选项）。

Answer 3

模态元素有一个名为modal的数据对象，保存所有传递的选项。 您可以在触发模式的元素上设置“源”数据属性，将其设置为源的ID，然后从optionsvariables中检索。

触发器将是：

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

在事件callback中，获取modal数据对象，并查看source选项：

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

Answer 4

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

看到这里

Answer 5

就像你说的，我有一种情况，就是必须绑定一些与“调用者”相关的数据。 我已经设法通过绑定一个“点击”事件来解决它，并使用这样的数据：

调用者

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

像这样，无论如何你都可以处理与调用者相关的数据。