From what I can tell, specifically in anything over Bootstrap 5.0, it is very difficult to remove the modal backdrop and allow interaction with the background elements of the page. Yes, you can create the static modal and specify the option for backdrop: false but it still appears to leave an invisible overlay over the full screen content, making the background unusable. Does anyone know how to remove the modal backdrop so the background content is usable and interactive?

While this question was asked here: How to allow page interaction while Bootstrap modal active?

The question is never fully answered. The solution provided shows how to put a single element as a index above the modal. This works in this case because it is a navigation bar. Doing this with the body of the page would cover the modal itself.

 const modal = new bootstrap.Modal('#myModal', {
      keyboard: false,
      backdrop: false
    }) 

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="staticBackdropLabel">Modal title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</div>