Menu icon Foundation
Reveal modal fixed position

I'm trying to get the Foundation 5 reveal modal to sit in a fixed position i.e. to scroll with the window. However adding css fixed positioning to the reveal modal introduces an issue.

The issue is that when the modal is triggered the code calculates how far from the top of the window it needs to be, which would be correct in it's default absolute positioning. However when in a fixed position this results in the the calculation pushing the modal off screen, unless opened while at the top of the window.

I'm using bower to get foundation and I need to be able to update it, so hacking the function to remove this feature is not ideal.

Anyone have any suggestions?

reveal modalfixedposition

I'm trying to get the Foundation 5 reveal modal to sit in a fixed position i.e. to scroll with the window. However adding css fixed positioning to the reveal modal introduces an issue.

The issue is that when the modal is triggered the code calculates how far from the top of the window it needs to be, which would be correct in it's default absolute positioning. However when in a fixed position this results in the the calculation pushing the modal off screen, unless opened while at the top of the window.

I'm using bower to get foundation and I need to be able to update it, so hacking the function to remove this feature is not ideal.

Anyone have any suggestions?

Fangyuan Qian over 4 years ago

i have the same issue with version 5.5.0

Corey Schaaf about 4 years ago

I have the same issue accept I've been using sass to create my own custom classes. If a user scrolls down to the bottom of the page and there's a link to the modal window, position fixed means they have to scroll all the way the top to see the modal.

What I've been trying to do:

Create a modal where the background is locked (no scrolling).
Have content inside the modal be scrollable if it takes up more than the allocated height of the container. I can achieve this by using overflow: auto.

Regardless of where the user is on the page, I want the modal window to open within the viewport of where they are. (fixed position does not allow that to happen).

Rafi Benkual about 4 years ago

This is a super tricky thing to do right. There are dedicated positioning libraries like tether that haven't yet solved this.

Curious what the interaction is that a modal will follow user down the page? Wouldn't that be an annoyance to the user?

Corey Schaaf about 4 years ago

Not sure I follow your question.

If a user clicks on an item that opens a modal window, I don't want it to "follow" them as that implies the modal is moving when the user scrolls. I want the modal to take up the entire view port. If the content that exist inside the modal is taller than the height of the modal, then I would want the content inside the modal to be scrollable.

This is why it is essential that the background lock in position.

Rafi Benkual about 4 years ago

Ok got it, you said you are using overflow: auto. That has worked for me before as well.