Links in Modal Not Clickable

Design help General
1

Hi,
I’m running into a problem where text links within my modal aren’t clickable. You can right click and open the link, but left clicking it doesn’t work.

Scroll down to 2023 HCF Initiatives > View All (button) > The Fresh Water Initiative > modal (modal-INIT-3)

There’s a text link in the first paragraph.

I assume there’s something “Blocking” the click but cant figure out what it is.

General info.
• Client required pages to be modals instead of actual pages.
• Modals are div’s set to fixed position and display ‘none’.
• Button interaction sets display to ‘block’.
• I had to use some to have the scroll of the main page stop while modal is open. But you can still scroll the modal.

I’ve been trying a bunch of things but couldn’t figure out what the problem is. I tried z-index, different ways of setting the display through interactions, moving elements order around, etc. What am I missing?

Thanks!

Read-only link
https://preview.webflow.com/preview/hcf-annual-report-2023?utm_medium=preview_link&utm_source=designer&utm_content=hcf-annual-report-2023&preview=8829cfaa43447a7a3230d7ff3bbf2358&workflow=preview

Staging link

2

Hey Ryan, it’s this code here.

I haven’t investigated why it’s triggering on your link click but it’s preventing the default action ( the link navigation ).

image

3

@memetican thanks for looking into it! That fixed the problem. I’ll have to do some QA to see if there are side effect bugs but looks good for now.

Again, thank you. I’ve been driving myself crazy trying to figure this out. At the very least this gives me something to go off of.

1 Like