获取关闭模态的元素

Question

在我的HTML中,我在我的一个模态中有这个:

<a href="#" class="clicker" data-dismiss="modal">Click</a>

如果单击此元素,它会隐藏模态.

但是,我希望能够获得在jQuery中关闭模式的元素,如:

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

但这不起作用.relatedTarget似乎只对工作show.bs.modal和shown.bs.modal(按文档).

那么如何才能获得导致模态在hidden.bs.modal事件中关闭的元素？

Answer 1

我制作了一支笔来展示如何达到预期的结果。正如您在此示例中所看到的，Bootstrap 生成的事件不共享用于关闭模态框的确切元素。它们将整个模态元素本身引用为.target和。.currentTarget

因此，为了获取单击以关闭模式的元素，我使用了 jQuery 选择器功能。像这样：

$("[data-dismiss='modal']").click(function() {
  $("#data-dismiss").html('#'+ $(this).attr('id'));
});

在本例中，jQuery 正在搜索具有data-dismiss该值的属性的每个元素modal，并将回调函数附加到找到的元素上，该回调函数在单击这些元素时执行。

正如您在我制作的示例中看到的，有两个具有此属性的按钮。模态标题中的一个：

<button id="header-close-button" type="button"
        class="close" data-dismiss="modal" aria-label="Close">
    <span aria-hidden="true">&times;</span>
</button>

模式页脚中的另一个：

<button id="footer-close-button" type="button"
        class="close" data-dismiss="modal" aria-label="Close">
    <span aria-hidden="true">Close</span>
</button>

这两个按钮都有不同的 ID，我设置这些 ID 是为了显示您可以通过附加$(this).attr('id')到单击事件的回调函数来检查到底单击了哪一个按钮。