Meteor的铁路由器不关闭模态对话框

Question

我正在使用Meteor和Iron Router,我有一个模态对话框,当它被解雇时不会隐藏背景.为了更准确,我希望在点击关闭按钮后,铁路由器将重定向到另一个页面.重定向代码确实有效,但背景仍然可见.如果我删除路由线 - 模式被解除,背景也是如此.

这是模态的标记:

    <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>

这是切换模态对话框的按钮:

<button type="button" id="delete-recipe-btn" data-target="#confirm-modal" data-toggle="modal" class="btn btn-primary btn-danger pull-right">Delete</button>

以下是确认模式对话框的"是"按钮上的单击事件:

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

为什么路由会让背景可见？

Answer 1

这有多种解决方案,具体取决于您对行为的要求.如果您希望模态首先隐藏,然后更改页面,则可以对模态的行为使用回调.

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

关于为什么背景可见的问题 - 它很复杂.只有"隐藏"动画完成后才会隐藏背景,并且更改页面会中断/停止此行为.