Keep modal open while hovering over it

On my site, I am trying to build a modal that appears when hovering over the nav menu link blocks. Testing it on the first link, the modal appears on hover no problem, but I’d like the modal to remain visible as my mouse moves from the nav menu to the modal, and keeps the mouse over the modal. Right now, once I move my cursor off the nav menu, it delays, and then fades out.

I’ve seen a similar topic here [LINK] but I’m not sure how to make my modal a child of the trigger - the nav menu link blocks.

Appreciate any advice on this

EDIT: This is weird, the public link is showing the modal on display on page load when it should be invisible, so it’s hard to replicate the problem I’m describing above… It’s loading with 0 opacity when I preview the site on my designer page.

For reference, here’s a website I found that does it very well - trying to replicate this interaction behavior. [EXAMPLE SITE]


Here is my public share link: [LINK]1

Hi @Henrik,

To make your modal a child of the trigger it simply means that your Modal needs to be nested within the Link Block element. When you see the word parent/child it’s referencing the relationships of the elements in the Navigator. So in this screenshot Link Block is a parent of Text Block and of Modal.
image

Once you move Modal to be a child of Link Block you’ll need to make some edits to your Modal element styling and the Modal Hover/Hover 2 Interactions.

For the styling of the Modal element you’ll want to give it a minimum width and then the position can’t be 0% on all sides otherwise everywhere the mouse is hovering on the page will keep the Modal open. So you’ll need to tweak the positioning to get it how you want to. Here’s what I did as an example. If you want the modal centered, make sure your left and right positions are the same percentage and remove the 50rem max width on modal-container so you can see the actual full size of the Modal.

On Menu Open you’ll need to add a Hide/Show action to set the Display to None as an initial state on Modal and then Display to Block with the previous action as setting Opacity to 100%.


On Menu Close you’ll need to add a Hide/Show action on Modal to set Display back to None. This should fix it so that it only appears when you hover the Link Block and actually disappears when you’re not hovering it (instead of just going invisible).

Let me know if this works for you or if you have further questions on how to implement this.

1 Like

Incredible! Thank you @CaitlinRSE this worked perfectly!

1 Like