延迟关闭Twitter Bootstrap模态框的链接

Question

我正在展示一个简单的Bootstrap模态框，底部有一个“结账”按钮。

点击按钮后，我想要：

1. 关闭模态框，例如$('#myModal').modal('hide')
2. 等待动画完成
3. 更改window.location.href到我的“结账”页面。

我找不到一种能够链接这些操作而不是立即运行下一个函数的方式，例如：

$('#myModal').modal('hide').each(function() {
    window.location.href = '/checkout'; 
});

我认为delay()可能会有帮助，例如：

$('#myModal').modal('hide').delay(1000).each(function() {
    window.location.href = '/checkout'; 
});

这也不起作用，它只是立即改变页面。

这是一个常见的jQuery问题吗？还是我需要扩展Bootstrap来处理这个问题？

- AndyC

Answer 1

当 Twitter Bootstrap modal 完全隐藏时，会触发一个名为 hidden 的事件。因此，您可以像这样执行操作：

$('#myModal').bind('hidden', function(){
    window.location.href = '/checkout';
}).modal('hide');

- Inferpse

---

我想在答案中加入这个内容。你可以使用 one 代替 bind。这样，你的函数将只在以下 hide 方法调用后执行一次。是的，你应该在“结算”按钮点击时运行整个代码。 - Inferpse

谢谢，我按照上述方法尝试了一下，它起作用了。一开始我有些犹豫，因为我认为这个范围可能适用于所有模态关闭，而不仅仅是点击“结账”按钮，但它完美地工作了！ - AndyC

如果你想在 Bootstrap 3 中实现完全相同的行为，请使用 "hidden.bs.modal" 事件而不是 "hidden"。 - mdrozdziel