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

我有一个a元素调用模式：如何获取Twitter Bootstrap Modal的调用者元素？

<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元素（它从我的事件订阅函数调用了模式）？

来源

2012-07-19 cnkt

'$（“一[HREF ='＃ myModal']“）'会选择'a'标签。那是你在找什么？ – sachleen 2012-07-19 22:40:23

不，这不是真的。因为它可以是任何东西而不是#mymodal。我在找什么就像：event.relatedTarget或event.OriginalTarget或类似的东西。 – cnkt 2012-07-19 22:42:31

它不一定是'＃mymodal'才能启动模态'mymodal'吗？你可以用一个变量来替换“mymodal”，其中包含事件所在的元素的ID。 – sachleen 2012-07-19 22:45:07

由于event.relatedTarget在Bootstrap 3.0.0中得到解决。

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

来源

2014-01-23 10:04:35 lou

以及如果我想知道调用隐藏模式的元素，该怎么办？ – axel 2014-03-11 16:14:22

好的问题轴，目前似乎没有什么。 – 2014-09-21 18:26:38

在bootstrap 2.3中有没有解决这个问题的方法？ – Ashimema 2015-02-03 16:13:50

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

见here

来源

2012-07-31 23:53:26 SummerDew

提交了[pull request]（https://github.com/twitter/bootstrap/pull/6256），但因某种原因被拒绝。这是我非常想看到的一个功能。 – Bojangles 2012-12-31 01:04:01

我有一个情况我有绑定关系到“调用”的一些数据，就像你说的。我已经成功通过“点击”事件绑定到它，像这样的数据的工作来解决这个问题：

<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-14 11:03:25 darksoulsong

你要听：

$('[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或者解雇任何其他事件。请注意，这是Bootstrap 3.0.0。如果你使用2.3.2，你需要摆脱.bs.modal（我认为）。

我喜欢这个解决方案：你不必记得谁是这个，自我,那和其他代理调用解决方法。

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

来源

2013-09-23 15:39:31 Alex

我的情况最好的选择。而且，是的，在2.3.2中，您需要删除.bs.modal。 – 2017-03-10 23:43:45

令人惊讶的聪明的解决方案！我希望我能多次提升这个解决方案。我的问题是，一个模态是由多个元素触发的，我希望在模态内的一个按钮上点击触发元素。虽然使用'show.bs.modal'和'event.relatedTarget'的传统路线是可能的，但我最终会做出不必要的'unbind（）'调用和/或性能损害。再次欢呼！ – Fr0zenFyr 2017-09-14 06:41:31

模态元素具有保存所传递的所有选项命名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-21 15:36:59 user2109658

这最初似乎适用于我，但只要我有多个来源，它停止工作。看起来模式会在第一次调用时保留这些选项，因此，无论您首先点击哪个锚点，它都将在随后的所有操作中使用该数据源。 – izak 2015-07-07 09:34:41

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

回答

相关问题