Modal 1 Clipping Issue: How to Make It Full-Screen in Webflow

·

I'm using the Modal 1 component, with multiple instances within the one page. I've noticed when it is shown, the Modal becomes clipped to a parent Div. The Modal is nested in Webflow Components, but I've noticed the issue remains when unlink the instance. Any help with having the Modal take the entire screen again would greatly appreciated. Project's Read Only Link

2 comments

· Sorted by Oldest

Matt J.
·
·
Sebastian H. it sounds like the Finsweet Smart Lightbox might be what you need here: https://finsweet.com/attributes/smart-lightbox
❤️1
Sebastian H.
·
·
Matt J. This worked, thank you so much!! Just a note for anyone else, there was a few adjustments I needed to make to the component: Change the positioning
modal1_component - Position: fixed
Adding attributes to the correct divs:
modal1_component - fs-smartlightbox-element="lightbox"
button - fs-smartlightbox-element="trigger-open"
modal1_close-button - fs-smartlightbox-element="trigger-close"
I also noticed that styling was then inherited from the body. In my case, the text became black, so I had to define that again within modal1_component
Loading attachments

Matt J.
·
·
Sebastian H. it sounds like the Finsweet Smart Lightbox might be what you need here: https://finsweet.com/attributes/smart-lightbox
❤️1
Sebastian H.
·
·
Matt J. This worked, thank you so much!! Just a note for anyone else, there was a few adjustments I needed to make to the component: Change the positioning
modal1_component - Position: fixed
Adding attributes to the correct divs:
modal1_component - fs-smartlightbox-element="lightbox"
button - fs-smartlightbox-element="trigger-open"
modal1_close-button - fs-smartlightbox-element="trigger-close"
I also noticed that styling was then inherited from the body. In my case, the text became black, so I had to define that again within modal1_component
Loading attachments