javascript - 获取关闭模态的元素

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 ( as per the documentation )。

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

Answer 1

I have made a Pen to show how to achieve the desired result .如您在此示例中所见，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')点击事件。