I currently have a modal window open which contains a paginated list. Within this modal, I have next/previous buttons that are supposed to display new content.
Since this functionality needs to work on multiple pages, I can't include HTML code for the modals next and prev inside the initial modal as Bootstrap recommends.
My workaround involves closing the current modal and opening a new one using JavaScript. This method works quite well except for one issue: every time I close a modal, the modal itself closes but a grey semi-transparent background remains, adding up each time a new modal is opened.
Due to the framework and template constraints, these modals share the same id. I attempted to use different modal ids for each page, but encountered similar results.
The question at hand is why does this semi-transparent div linger when the modal is closed? Is there an alternative approach to tackle this issue? (I believe embedding the html code for next/prev within the modal is not feasible).
Included below is my code snippet, along with other options I've experimented with, all yielding comparable outcomes:
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 the previous/next buttons inside the modals are:
<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>