Bootstrap Nested model show

siva nathan

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

4 Replies

Know the answer? Post it — somebody with the same question will find it here.

Vishal Joshi3y ago

Accepted answer

Hello Siva,

Try the below code for the expected result.





    
    
    
    
    



    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

Thanks

Deepak Rawat3y ago
Here's an example implementation:

HTML
```
 

   
      
          
         
            First Modal
             
         
         
            This is the first modal.
             
         
      
   

 

   
      
          
         
            Second Modal
             
         
         
            This is the second 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:
1. 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.
2. 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).
3. 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.
+1

Tuhin Paul3y ago

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

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.

Vishal Yelve3y ago
Hi Siva,

Do refer below link

https://www.cssscript.com/nested-bootstrap-5-modal/
+2