Tabs content container limiting fullscreen modal

Design help General
1

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:

51
513236×1818 228 KB

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:

09
093124×1732 252 KB

These are the settings for the modal:

35
35478×570 20.4 KB

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:
https://cloudscape.webflow.io/pricing

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

2

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

3

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.