Modal backdrop covering the modal container

[razorkyle]

Can't fix modal backdrop issue even if I set backdrop z-index lower than the modal container.

This issue persist when modal container is put inside fixed position container like below code

<div style="position: fixed; top: 0; left: 0;">
      <!-- Button trigger modal -->
      <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
        Launch demo modal
    </button>
    
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title fs-5" id="exampleModalLabel">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">Save changes</button>
          </div>
        </div>
      </div>
    </div>
</div>

My temporary fix is removing the backdrop but is there any way to use modal with backdrop that is placed inside fixed position containers?

Reduced test cases

1. Adjusted the z-index of .modal-backdrop and set lower than .modal but nothing change

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

v5.3.3

[patkon]

You've actually already given yourself the answer to your question:

This issue persist when modal container is put inside fixed position container like below code

This behavior is also described in the documentation. How it works, point 4.

Modals use position: fixed, which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You’ll likely run into issues when nesting a .modal within another fixed element.

I always do it like this:

Place the <button type="button" class="btn btn-primary" data-bs-toggle="modal" ... wherever you want but the <div class="modal fade" ... at the end, just before </body>.

[jonhubby]

Thanks for the suggestion! I hadn’t considered placing the modal outside the fixed container. I’ll give that a try and see if it resolves the issue. It's good to know that modals have this behavior when nested in fixed elements, and I’ll keep that in mind for future implementations.