这是我的情况。 我在页脚中有一个带有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/
谢谢:)
答案 0 :(得分:1)
为解决该问题,我更改了代码,如下所示:
$().ready(function () {
$("#saveBtn").on('click', function () {
$('#modalAddressees').modal('hide');
$('#modalNewAddress').modal('show');
});
});
答案 1 :(得分:0)
$().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');
});
});
答案 2 :(得分:0)
在隐藏的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%)
}
似乎就像您写的那样。