我打开了一个模态窗口(包含分页列表),并且在该模态中我有下一个/上一个按钮,应该显示新内容。
我不能像 Bootstrap 所建议的那样在第一个模态中包含模态 next 和 prev 的 HTML 代码,因为这应该适用于许多页面。
我的解决方案是关闭当前模态并通过javascript打开一个新模态,这工作得很好除了:每次我关闭一个模态时,模态都会关闭,但灰色的半透明背景(类似窗帘)会保留并添加添加到新打开的一个中。
由于使用的框架和模板内容,这些模态具有相同的 id。我尝试为每个页面使用不同的模式 ID,但结果是相似的。
问题是,为什么这个半透明的div在关闭模态时仍然保留?或者有不同的方法吗? (我认为在此模式中保留下一个/上一个的 html 代码不是一个选择)。
这是我的代码,在评论中您会看到我尝试过的其他选项,但结果都相似:
openModalWindow: function(route, modalId)
{
$.ajax({
type: "GET",
url: route,
success: function(data){
$('#' + modalId).remove();
$('body').append(data);
$('#' + modalId).modal('show');
}
});
},
closeModalWindow: function(modalId)
{
// $('#' + modalId).remove();
// $('#' + modalId).on('hidden.bs.modal', function () {$('#' + modalId).modal('show')});
let myModal = new bootstrap.Modal(document.getElementById(modalId),
{keyboard: false});
//myModal.dispose();
myModal.hide();
},
openOtherModal: function(closeModalId, newRoute)
{
closeModalWindow(closeModalId);
openModalWindow(newRoute, closeModalId);
},
模态中的上一个/下一个按钮是:
<a href="javascript:void(0)" onclick="AdminUI.openOtherModal('clientfile-listby'
'list.php/page-1')">
< Prev.
</a>
<a href="javascript:void(0)" onclick="AdminUI.openOtherModal('clientfile-listby'
'list.php/page+1')">
Next. >
</a>
关闭模式很奇怪。通常在我的公司我们总是使用模态隐藏:
closeModalWindow: function(modalId) {
$('#' + modalId).modal('hide');
},
如果由于某种原因你的模态没有正确关闭,你也可以尝试直接删除背景类:
closeModalWindow: function(modalId) {
$('#' + modalId).modal('hide').on('hidden.bs.modal', function () {
$('.modal-backdrop').remove();
});
},
我还建议使用 $('#') 语法,以确保您引用所需的元素