Menu icon Foundation
Fullscreen Modal with grid content?

I'd like to have a modal that goes fullscreen ( or nearly fullscreen ) that contains responsive grid elements..... if the device is too small to show all contents then a scrollbar should appear....

Is there a plugin or native function that supports this kind of thing? Thanks for any suggestions!

modalFullscreen

I'd like to have a modal that goes fullscreen ( or nearly fullscreen ) that contains responsive grid elements..... if the device is too small to show all contents then a scrollbar should appear....

Is there a plugin or native function that supports this kind of thing? Thanks for any suggestions!


Brandon Arnold gave the most helpful answer for this post
Brandon Arnold over 5 years ago

This codepen should get you pretty close. Make sure to hit edit to see the code used.

Basically i just reset all the values and used Viewport height and width instead of percents.

http://cdpn.io/EmfoK

Rafi Benkual over 5 years ago

You can make the modal full screen with some css. I would use the xlarge class to start with.

If the screen is too small the user can scroll the content, but a scroll bar is not a built in feature since it is not a mobile first solution.

Brandon Arnold over 5 years ago

This codepen should get you pretty close. Make sure to hit edit to see the code used.

Basically i just reset all the values and used Viewport height and width instead of percents.

http://cdpn.io/EmfoK

Wes Mann over 5 years ago

Thanks very much guys... trying these out now!

Wes Mann over 5 years ago

Brandon, I looked at that pen and it works great! Are their any hacks to get this working in ie8? We've still got 10% of our customers using ie8!

Or maybe if they are on ie 8 we can link them to a page with the content of the modal instead of a modal. hmmmm

Thanks again...

Brandon Arnold over 5 years ago

Glad it worked out. To be honest as a ZURBian i haven't had to worry about IE8 in a long while. There are tons of IE8 threads on the forum for you to peruse though :)