How can I close a modal and open another one (with same ID) using JavaScript?

Question

I have one modal window opened (contains a paginated list), and from that modal I have buttons next/prev that should show new content.

I can't have HTML code for modals next and prev inside first modal as Bootstrap suggests, as this should work for many pages.

My solution would be to close current modal and open a new one with JavaScript. This is working quite ok except this: everytime I close a modal, the modal is closed, but a grey semitransparent background (curtain like) stays and adds to the one added to the new opened one.

Because of framework used and template stuff, these modals have same id. I tried using different modal id's for each page but the result is similar.

The question is, why is this semitransparent div staying when closing modal? or is there a different approach for this? (I think keeping html code of next/prev inside this modal is not an option).

This is my code, in comments you see other options I tried but all with similar result:

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);
},

And prev/next buttons insied modals are:

    <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

Closing modals is wierd. Usually in my company we always use modal hide:

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

If for some reason your modal is not closing properly you can also try to directly remove the backdrop class:

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

also i recomend using the $('#') syntax which ensures that you are referencing the element you want