关闭另一个模式时打开模式的问题

Question

这是我的场景。我有一个模式（模式 A），在页脚中有 2 个按钮：保存并关闭。当我点击“保存”按钮时，我需要关闭模态 A 并打开模态 B，它适用于以下代码：

模态A：

<div class="modal fade" tabindex="-1" role="dialog" id="modalAddressees">

    <div class="modal-dialog modal-lg" role="document">

        <div class="modal-content">

            <div class="modal-header">

                <h5 class="modal-title">Select Addresses</h5>

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                    <span aria-hidden="true">×</span>

                </button>

            </div>

            <div class="modal-body">

                [....]

            </div>

            <div class="modal-footer bg-whitesmoke br">

                <button type="button" id="saveBtn" class="btn btn-primary">Save</button>

                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

            </div>

        </div>

    </div>

</div>

Java脚本：

$().ready(function () {

    $("#saveBtn").on('click', function () {

        $('#modalAddressees').modal('hide')

        $('#modalAddressees').on('hidden.bs.modal', function () {

            $('#modalNewAddress').modal('show');

        })

    });

});

但是在我关闭模态 B 并再次打开模态 A 之后，如果我单击关闭按钮（关闭它）它会再次打开模态 B，为什么？在我的 Javascript 中，我选择仅在单击“保存”按钮时打开模式 B，而不是关闭按钮。请问你能帮帮我吗？

这里我的测试有同样的错误：https ://jsfiddle.net/swim89/xso0jw9k/2/

Answer 1

为了解决这个问题，我改变了我的代码是这样的：$().ready(function () {&nbsp; &nbsp; $("#saveBtn").on('click', function () {&nbsp; &nbsp; &nbsp; &nbsp; $('#modalAddressees').modal('hide');&nbsp; &nbsp; &nbsp; &nbsp; $('#modalNewAddress').modal('show');&nbsp; &nbsp; });});

Answer 2

在隐藏的 bs 模态 id: modalAddAddress 显示模态 id: modalNewAddress$('#modalAddressees').on('hidden.bs.modal', function () {&nbsp; &nbsp; $('#modalNewAddress').modal('show');&nbsp;})似乎它像你写的那样工作。

Answer 3

Javascript$().ready(function () {&nbsp; &nbsp; const modalA = $('#modalAddressees');&nbsp; &nbsp; $("#saveBtn").on('click', function () {&nbsp; &nbsp; &nbsp; &nbsp; modalA.modal('hide')&nbsp; &nbsp; &nbsp; &nbsp; modalA.off('hidden.bs.modal').on('hidden.bs.modal', function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; modalA.modal('show');&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; });});或者$().ready(function () {&nbsp; &nbsp; const modalA = $('#modalAddressees');&nbsp; &nbsp; modalA.on('hidden.bs.modal', function () {&nbsp; &nbsp; &nbsp; &nbsp; modalA.modal('show');&nbsp; &nbsp; });&nbsp; &nbsp; $("#saveBtn").on('click', function () {&nbsp; &nbsp; &nbsp; &nbsp; modalA.modal('hide');&nbsp; &nbsp; });});