javascript - 如何在不触发事件的情况下打开/关闭 Bootstrap 模式？

Question

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

现在我还希望能够在不触发此操作的情况下以编程方式打开或关闭模态。可能吗？

Answer 1

您需要一种方法来确定模态是如何触发的；旗帜或类似物。

根据Bootstrap documentation (假设您使用的是版本 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');

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