获取Bootstrap3 Modal的调用元素

Bootstrap的模态框(Modal)是一个非常实用的Javascript组件。

从3.0版本开始,Modal对话框的调用元素可以通过show/shown事件中新加入的relatedTarget属性获取

“If caused by a click, the clicked element is available as the relatedTarget property of the event.”

用法如下:


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

请看下面这个例子:

模态框在显示之前会先执行alert,显示调用元素的html

代码如下:


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

<!-- Modal -->
<div id="myModal" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"><button class="close" type="button" data-dismiss="modal">&times;</button>
<h4 id="myModalLabel" class="modal-title">Modal title</h4>
</div>
<div class="modal-body">...</div>
<div class="modal-footer"><button class="btn btn-default" type="button" data-dismiss="modal">Close</button> <button class="btn btn-primary" type="button">Save changes</button></div>
</div>
<!-- /.modal-content --></div>
<!-- /.modal-dialog --></div>
<!-- /.modal -->

本文链接:http://bookshadow.com/weblog/2014/02/20/bootstrap3-modal-invoker/
请尊重作者的劳动成果,转载请注明出处!书影博客保留对文章的所有权利。

如果您喜欢这篇博文,欢迎您捐赠书影博客: ,查看支付宝二维码