流星的钢铁路由器不会关闭模式对话框 [英] Meteor's Iron Router doesn't close modal dialog

问题描述

我正在使用Meteor和Iron Router，并且有一个模态对话框，当它被关闭时，它不会隐藏背景.为了更准确，我希望单击关闭按钮后，铁路由器会重定向到另一页.重定向代码确实有效，但是背景保持可见.如果我删除布线，则模式将被取消，背景也会被取消.

I'm using Meteor and Iron Router, and I have a modal dialog that won't hide the backdrop when it gets dismissed. To be more accurate, I want that after clicking the dismiss button, the iron router will redirect to another page. The redirection code does work, but the backdrop stays visible. If I remove the routing line - the modal is dismissed and so does the backdrop.

这是模态的标记:

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

以下是用于切换模式对话框的按钮:

Here is the button that toggles the modal dialog:

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

这是确认模式对话框的是"按钮上的点击事件:

Here is the click event on the 'yes' button of the confirm modal dialog:

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

为什么布线会使背景保持可见?

Why would the routing leave the backdrop visible?

推荐答案

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

There are multiple solutions to this, depending on exactly how you desire the behavior. If you want the modal to hide first, then change the page, you can use a callback on the modal's behavior.

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

关于您的背景为何可见的问题-非常复杂.仅在隐藏"动画完成后才隐藏背景，更改页面会中断/停止这种行为.

As to your question of why the backdrop is visible - its complicated. The backdrop is only hidden once the "hide" animation completes, and changing the page interrupts/stops this behavior.

这篇关于流星的钢铁路由器不会关闭模式对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！