Javascript 流星'；s铁路由器不'；t关闭模态对话框

我使用的是Meteor and Iron Router，我有一个模态对话框，当它消失时不会隐藏背景。更准确地说，我希望在单击“取消”按钮后，iron路由器将重定向到另一个页面。重定向代码确实有效，但背景仍然可见。如果我移除布线线，模态和背景都将被取消

以下是模态的标记：

    <div class="modal fade" id="confirm-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title" id="modal-title">Are you sure?</h4>
            </div>
            <div class="modal-body">
                This cannot be undone.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal" id="confirm-yes-button">Yes</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
            </div>
        </div>
    </div>
</div>

---

为什么布线会使背景可见？

有多种解决方案，具体取决于您对行为的期望。如果希望先隐藏模式，然后更改页面，可以对模式的行为使用回调

'click #confirm-yes-button': function() {
    Recipes.remove(this._id);
    $('#confirm-modal')
        .on('hidden.bs.modal', function() {
            Router.go('/');
        })
        .modal('hide');
}

---

至于你的问题，为什么背景是可见的-它很复杂。只有在“隐藏”动画完成后，背景才会隐藏，更改页面会中断/停止此行为。

解决方案之一是使用jQuery方法删除背景

'click #confirm-yes-button': function() {
    Recipes.remove(this._id);
    $('#confirm-modal')
        .on('hidden.bs.modal', function() {
            Router.go('/');
        })
        .modal('hide');
}

一旦用户被重定向

Accounts.onLogin(function(){
    Router.go('/');
    $('.modal-backdrop').remove();
});

但是，要使用此方法，您需要访问Accounts.login方法，该方法可以通过添加

gwendall:auth客户端回调

---

打包到meteor项目中

试着在模板中设置模式背景，如下面的答案所示

Accounts.onLogin(function(){
    Router.go('/');
    $('.modal-backdrop').remove();
});