Streaming live at 10am (PST)

Tabs content container limiting fullscreen modal

Hello,

I have created a CTA button that when clicked, it triggers a modal covering the width and height of the page, and in which I’ve embedded a form through an HTML embed. This button sits in the navbar and is working exactly the way it should there:

However, I now wish to place it inside a tab that has pricing options, but when the button is clicked, the modal (which is set to 100vw and 100vh and with a z-index of 9999), it spans the entire width and height within the tabs content container, as such:

These are the settings for the modal:

When the z-index says it’s relative to the ‘Body’ element, and width and height are set to cover the entire screen, shouldn’t this modal appear across the entire page, and not be restricted to display inside the tabs content?

If anyone can advise on this I would be very grateful.

Thanks,
Martin

Staging link:

Preview link:
https://preview.webflow.com/preview/cloudscape?utm_medium=preview_link&utm_source=designer&utm_content=cloudscape&preview=fdf86c59c0406686d2beb4906e5b1b35&pageId=5cc88c7066c4c64b2763509e&mode=preview

Here is my site Read-Only: LINK

Try placing the Modal wrap under the Body and not inside sections or Tabs.

Hi @Eli11,

Thank you for the response, and forgive me for such a late reply!

I tried your suggestion, however as soon as I move anything out of the top div (named ‘Flex’), it doesn’t trigger the popup. Looks like a design restriction from Webflow.