Bootstrap Nested model show

Question

Hi All,

Bootstrap 5

I want to display multiple bootstrap modal one by one with showing previous modal in the background,

Ex: there are 3 models in that screen .while clicking button firtst modeal will display

after that in first modal having button to open 2nd modal , while opening the second modal first modal popup needed to display on the background of 2nd popup

Vishal Joshi · Answer

Hello Siva, Try the below code for the expected result. .modal:nth-of-type(even) { z-index: 1052 !important; } .modal-backdrop.show:nth-of-type(even) { z-index: 1051 !important; } Launch modal Modal title × Content for the dialog / modal goes here. Launch modal Close Save changes 2nd Modal title × Content for the dialog / modal goes here. Content for the dialog / modal goes here. Content for the dialog / modal goes here. Content for the dialog / modal goes here. Content for the dialog / modal goes here. Close Save changes $('#openBtn').click(function () { $('#myModal').modal({ show: true }); }) Thanks

Vishal Yelve · Answer

Hi Siva, Do refer below link https://www.cssscript.com/nested-bootstrap-5-modal/

Deepak Rawat · Answer

Here's an example implementation: HTML First Modal &times; This is the first modal. Open Second Modal Second Modal &times; This is the second modal. Open First Modal JavaScript: $('#secondModal').on('shown.bs.modal', function() { $('#firstModal').css('z-index', 1050); // Set z-index of first modal to keep it in the background }); $('#secondModal').on('hidden.bs.modal', function() { $('#firstModal').css('z-index', 1050); // Reset z-index of first modal after the second modal is closed }); Explanation: In the HTML code, there are two modal divs ( firstModal and secondModal ) with their respective content. The data-target attribute in the button tag opens the first modal when clicked. In the JavaScript code, the shown.bs.modal event is triggered when the second modal is shown. We use this event to set the z-index CSS property of the first modal to keep it in the background. The value 1050 is used to ensure it is below the second modal (Bootstrap's default z-index for modals is 1050). Similarly, the hidden.bs.modal event is triggered when the second modal is closed, and we reset the z-index of the first modal to its original value. By setting the appropriate z-index values, the first modal will remain visible in the background when the second modal is opened. You can extend this pattern to add more modals by following a similar structure and adjusting the JavaScript code accordingly.

Tuhin Paul · Answer

HTML: Each modal should have a unique ID and a button to trigger the next modal: Add buttons to trigger the modals and assign unique IDs to them Open Modal 1 Open Modal 2 Open Modal 3 JavaScript/jQuery to handle the modal interactions. $('#modal1').on('hidden.bs.modal', function () { $('#modal2').modal('show'); }); $('#modal2').on('hidden.bs.modal', function () { $('#modal1').modal('show'); }); $('#modal2').on('shown.bs.modal', function () { $('#modal3').modal('show'); }); The hidden.bs.modal event is triggered when a modal is closed, and shown.bs.modal event is triggered when a modal is fully shown. These events are used to control the display of the modals.