如何使用 JavaScript 关闭一个模态框并打开另一个模态框（具有相同的 ID）？

Question

我打开了一个模态窗口（包含分页列表），并且在该模态中我有下一个/上一个按钮，应该显示新内容。

我不能像 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')">
        &lt; Prev.
    </a>
    <a href="javascript:void(0)" onclick="AdminUI.openOtherModal('clientfile-listby'
                                                                 'list.php/page+1')">
        Next. &gt;
    </a>

Answer 1

关闭模式很奇怪。通常在我的公司我们总是使用模态隐藏：

closeModalWindow: function(modalId) {
    $('#' + modalId).modal('hide');
},

如果由于某种原因你的模态没有正确关闭，你也可以尝试直接删除背景类：

closeModalWindow: function(modalId) {
    $('#' + modalId).modal('hide').on('hidden.bs.modal', function () {
        $('.modal-backdrop').remove();
    });
},

我还建议使用 $('#') 语法，以确保您引用所需的元素