如何在不触发事件的情况下打开/关闭引导模式

How to open/close a bootstrap modal without triggering event?

本文关键字：模式 情况下 事件      更新时间：2023-09-26

我有一个引导模式，在手动打开或关闭时触发其他操作。这些操作与show.bs.modal和hide.bs.modal事件挂钩。

现在，我还希望能够以编程方式打开或关闭模式，而无需触发此操作。可能吗？

您需要一种方法来确定模态是如何触发的;标志或类似的东西。

根据 Bootstrap 文档（假设您使用的是版本 3），e.relatedTarget 被设置为在回调中为 show.bs.modal 事件单击的元素。因此，如果以编程方式触发，则e.relatedTarget是未定义的。 您可以使用它来避免运行show.bs.modal回调函数。例如：

$('#myModal').on('show.bs.modal', function (e) {
  if (e.relatedTarget) {
    // User triggered, do something...
  }
});

至于hide.bs.modal事件，没有类似的属性可用，但您可以使用切换类或数据属性实现相同的效果。 在要在代码中隐藏模态之前设置此标志，并确保模态的hide.bs.modal回调正在检查其是否存在，并且仅在不存在时才运行。例如：

// Prep modal event
$('#myModal').on('hide.bs.modal', function (e) {
    if (!$('#myModal').hasClass('programmatic')) {
        // User triggered, do something...
    }
});
// When hiding your modal
$('#myModal').toggleClass('programmatic');
$('#myModal').modal('hide');

对于上述两种情况，另一种选择是在显示/隐藏之前删除事件侦听器，触发要显示/隐藏的模式，然后重新添加事件侦听器。

相关文章：