Question

这是我的情况。我在页脚中有一个带有2个按钮的模态（模态A）：保存并关闭。当我单击“保存”按钮时，我需要关闭模式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>

JavaScript：

$().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 () {
    $("#saveBtn").on('click', function () {
        $('#modalAddressees').modal('hide');
        $('#modalNewAddress').modal('show');
    });
});

Answer 2

Javascript

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

或

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

Answer 3

在隐藏的bs模式ID：modalAddAdress上显示模式ID：modalNewAdress

body {
  overflow-x: hidden;
  position: relative;
}

.overflow-x-hidden {
  border: 1px solid blue;
}

h1 {
  background: palevioletred;
  color: #fff;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.tall {
  background: linear-gradient(to bottom, paleturquoise, white);
  height: 300vh;
  width: 100%;
}

.sidenav{
  width: 250px;
  height: 100%;
  background: black;
  position: absolute;
  right: 0;
  transform: translateX(100%)
}

似乎就像您写的那样。

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

3 个答案:

Javascript