Revision history [back]

There are a few ways to address this issue:

1. Add the following CSS code to your stylesheet:

   body.modal-open {
    position: fixed !important;
    width: 100%;
   }
   

   This code will fix the position of the body element and prevent scrolling when a modal is open.

2. Use JavaScript to add and remove a class to the body element when a modal is open and closed. This class can then be used to apply the CSS mentioned in option 1. Here's an example:

   $('#myModal').on('shown.bs.modal', function () {
    $('body').addClass('modal-open');
   });
   
   $('#myModal').on('hidden.bs.modal', function () {
    $('body').removeClass('modal-open');
   });
   

   Replace #myModal with the ID of your modal.

3. If the issue is occurring with a modal within a modal, try adding a higher z-index value to the inner modal. Here's an example:

   .modal-backdrop {
    z-index: 1040;
   }
   
   .modal-dialog {
    z-index: 1050;
   }