我有一个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
哪位从我的事件订阅功能调用modal-元素?
它在引导3.0.0由于解决了event.relatedTarget
。
$('#your-modal').on('show.bs.modal', function (e) {
var $invoker = $(e.relatedTarget);
});
你必须听:
$('[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与shown.bs.modal或者解雇任何其他事件。 请注意,这是引导3.0.0。 如果您在使用2.3.2你需要摆脱.bs.modal(我认为)。
我喜欢这个解决方案是什么:你不必记得谁是这样的, 自我 , 这和其他代理调用的解决方法。
当然,你要测试是否href属性是不是一个真正的链接(动态模式加载选项)。
该模式的元素有一个数据对象命名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
});
目前,它不提供外的框。 没有为它和一个变通,如果你想自己编辑的引导模态码功能要求。
见这里
我有一个情况我有绑定关系到“调用”的一些数据,就像你说的。 我已经成功通过“点击”事件绑定到它,像这样的数据的工作来解决这个问题:
调用者
<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);
});
这样,你可以处理反正你想与您的调用数据。