CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4bootstrap-modal
iamtheasad
iamtheasad

Reputation: 1127

Bootstrap Modal Dialog showing under Modal Background

I've repeatedly run into the following problem with Bootstrap's modal dialog where the dialog ends up showing underneath the modal background.

Just like this: enter image description here

Upvotes: 1

Views: 1757

Answers (1)

iamtheasad
iamtheasad

Reputation: 1127

Caused by positioning

The problem is that many modern applications use fixed, absolute and relative positioning to layout their user interface. The above problem occurs when the Modal dialog sits within a container that has any parent that uses either fixed, absolute or relative positioning. The change post 3.34 of bootstrap was that the modal overlay was moved to the DOM root below while the actual modal dialog content in this case is sitting inside of a separate nested DOM structure.

<body>
    <div>
        <div style="position: absolute">
            ... other content
            <div class="modal">
                ... modal dialog here
            </div>
         <div>
     <div>
    
   <div class="modal-overlay"></div>
</body>

The problem occurs because the overlay and the other content container are not relative to each other so the position:absolute (or fixed) and their z-index values are not directly related to each other.

The easiest solution is to move the modal dialog outside of any container and just declare it under the element, or - remove any absolute, fixed or relative positioning.

See details about it in this blog post

Upvotes: 4

Related Questions