What I’m trying to accomplish:
Have a CTA on my navigation that, when clicked, opens a modal with information inside of it, such as the ability to subscribe to a newsletter. Here is an example from another site:
The problem:
It appears I can’t just simply build a modal and then include it inside of the navigation section since WeWeb treats it as it’s own section. So it appears I have two options:
-
Build the modal and include the instance on every page. Not ideal, especially if the site already has a bunch of pages.
-
Attempt to build my own modal from scratch via a container that uses a z-axis, sticky positioning, and of course a true/false variable to show/hide it. The downside is I’m re-inventing the wheel (since this logic is already created via the Modal element) but the upside is I should be able to include it inside the global navigation section which would automatically include it on every page.
Any thoughts on this from anyone that perhaps would point to an easier solution?
From my understanding, the additional limitation to option 2 would be you can’t apply a ‘backdrop’ effect on a container element. Therefore, that would add additional logic you would need to build out if you were going for the same effect as the example image and disabling clicking outside of the floating container.
Modal backdrop options
I second you guys that this is not ideal, but it is not that terrible as it might seem either,
There might be two cases:
1. You want to display this modal on every page of a collection, this can look like a pain in the ass, but really all you gotta do is set it in the collection template and then it appears on every page that uses the template. (You can drag it in as a multi page section, see the second point).
2. Static pages, might be a pain in the ass, for now, but you can always use the multi page sections,
these when you edit one, they all change, so it’s basically a template.
You can wrap the container in an another container, like the following and set the “wrapper” as a backdrop.
[Container] ← Here you set height to 100vh and width to 100vw and set the position to fixed, black color with some opacity like 33% and setting a z-index + some logic as @brandon mentioned
— [Container] ← Here you put your content, e.g the car icon, heading, paragraph and the e-mail field
1 Like
This is something you could do with a custom component (e.g. with vueJS) using its built-in Teleport component. That way you could put the modal component in your nav bar and it would get injected onto the top level of the page, and then you could as easily dismiss it. Of course this requires some coding, but it would be relatively straightforward - and the results pretty slick.
