Meteor 的 Iron Router 不会关闭模式对话框答案

【问题标题】：Meteor's Iron Router doesn't close modal dialogMeteor 的 Iron Router 不会关闭模式对话框
【发布时间】：2014-08-13 08:13:40
【问题描述】：

我正在使用 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('/');
}

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

【问题讨论】：

尝试在您的模板中使用模态背景，就像这个答案stackoverflow.com/questions/19955055/…

标签： javascript twitter-bootstrap meteor iron-router bootstrap-modal

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

其中一个解决方案是使用 jQuery 方法删除背景一旦用户被重定向。

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

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

gwendall:auth-client-callbacks

打包到你的流星项目

【讨论】：