diff --git a/datamodels/2.x/itop-portal-base/portal/public/js/bootstrap-portal-modal.js b/datamodels/2.x/itop-portal-base/portal/public/js/bootstrap-portal-modal.js index 204f330bd..ca4ee9558 100644 --- a/datamodels/2.x/itop-portal-base/portal/public/js/bootstrap-portal-modal.js +++ b/datamodels/2.x/itop-portal-base/portal/public/js/bootstrap-portal-modal.js @@ -53,13 +53,21 @@ $(document).ready(function() }, 1000); // Hide tooltips when a modal is opening, otherwise it might be overlapping it - oBodyElem.on('show.bs.modal', function () + oBodyElem.on('show.bs.modal', '.modal', function () { $(this).find('.tooltip.in').tooltip('hide'); + + // Set the z-index of the modal and its backdrop in case we have several modals opened + let zIndex = 1050 + (10 * $('.modal:visible').length); + $(this).css('z-index', zIndex); + // Set the z-index of the backdrop later because it is created after the modal + setTimeout(function() { + $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack'); + }, 10); }); /* - * Display a error message on modal if the content could not be loaded. + * Display an error message on modal if the content could not be loaded. * * Note : As of now, we can't display a more detailed message based on the response because Bootstrap doesn't pass response data with the loaded event. */ diff --git a/datamodels/2.x/itop-portal-base/portal/public/js/toolbox.js b/datamodels/2.x/itop-portal-base/portal/public/js/toolbox.js index 9ada59daf..d0a5a3f98 100644 --- a/datamodels/2.x/itop-portal-base/portal/public/js/toolbox.js +++ b/datamodels/2.x/itop-portal-base/portal/public/js/toolbox.js @@ -168,6 +168,13 @@ CombodoModal._InstantiateModal = function(oModalElem, oOptions) { // Show modal if (oOptions.auto_open) { + + // Append modal to body if not already in DOM, this is also done when the modal is shown, but it happens after show.bs.modal event is triggered + // As we put this event listener on the body, it is not triggered when the modal is not in the DOM yet + if (oModalElem.parent().length === 0) { + $('body').append(oModalElem); + } + oModalElem.modal('show'); }