Streaming live at 10am (PST)

Modal window - background full height


#1

I was able to successfully recreate a modal window following this tutorial How to create a modal pop up

To make the form is accessible on all devices it is required set the “modal-background” to “Absolute” in order to make the content scrollable. However, this results in the background not covering 100% of the screen. The author of the tutorial mentioned that “There are ways to fix this”. Can someone post a solution for this? (If the background is set to “Fixed” then the content of the modal cannot be scrolled on smaller devices.)

Thank you.

_The Webflow team mentioned (years ago) that they plan to implement a modal component to Webflow. What is the status on that?


#2

Welcome to the Webflow forum!

Could you please edit Screenshot_2017-08-16_140811 and provide ALL the necessary details in your post so we can take a look at your site/issue?

In future if you want faster replies and more accurate answers, I suggest including all the details listed in the link above before someone has to ask.

Hope to hear from you soon. Thanks!


#3

Hi.

Unfortunately certain details such as a shareable link or screenshots could not be made public.

Summary:
First things first, the issue has been resolved.

The problem I had was that the background of the modal window from this tutorial [Tutorial] How to create a modal/pop-up in Webflow did not stretch 100% to the bottom of the browser window when scrolling. The solution (very well hidden in the middle of the thread) has also been posted in the thread mentioned above.

The solution from @matt50 worked very well:

  • Apply max-height: 100% and overflow: auto to the “modal window”.

Best.
Alex