CODEWITHSUNDEEP
css
scottb
scottb

Reputation: 43

Why is my custom modal window "outside / above" the window?

I have a homemade modal window that appears "above" or "outside" the actual window. To reach the button, you have to scroll down the page. The problem is the modal appears at the top of the page (not the window) It is hard to describe, so here's a testing link to view the behavior:

https://www.voyagersopris.com/testing/modal-testing#modal

Click the "OPEN MODAL" button.

The CSS that defines the position is:

    .form-modal {
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.4);
    }

JavaScript sets the display to block when the SHOW MODAL button is clicked.

So, my question is How do I make the modal appear within the window and not at the top of the page that is outside the window? FYI Bootstrap's Modal window displayed the same behavior, with the additional issue of appearing behind the overlay.

Thanks for any input!

Upvotes: 1

Views: 42

Answers (1)

tao
tao

Reputation: 90148

By default, position:fixed positions an element relative to current viewport, which is the currently visible section of the window object.

However, using 3d-transforms on elements you are setting them as current viewport for all their children.

In your case, 

-webkit-transform: translate3d(0,0,0);

... applied to .slide-menu-wrapper sets it as viewport for all its children. Which causes the modal to position itself relative to .slide-menu-wrapper.

Removing -webkit-transform: translate3d(0,0,0); from .slide-menu-wrapper fixes the problem (or overriding it with -webkit-transform: none).

You probably applied that style to prevent some flickering of some animation. You'll need to go into more detail and apply that rule to a more immediate parent of your problematic animated element.

On a separate note, .slide-menu-wrapper doesn't really sound like a class that should wrap your entire page, does it?

Upvotes: 3

Related Questions