如何获得Twitter的引导模态的调用元素?(How to get Twitter Bootstra

2019-06-26 10:34发布

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

Answer 1:

它在引导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'));
});

当然你也可以更换show.bs.modal与shown.bs.modal或者解雇任何其他事件。 请注意,这是引导3.0.0。 如果您在使用2.3.2你需要摆脱.bs.modal(我认为)。

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

当然,你要测试是否href属性是不是一个真正的链接(动态模式加载选项)。



Answer 3:

该模式的元素有一个数据对象命名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
});


Answer 4:

目前,它不提供外的框。 没有为它和一个变通,如果你想自己编辑的引导模态码功能要求。

见这里



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

这样,你可以处理反正你想与您的调用数据。



文章来源: How to get Twitter Bootstrap Modal's invoker element?