Relume
Log in

Community forum for knowledge and support

Updated 6 months ago

Modal Not Closing Properly on Desktop Breakpoints

At a glance

The community member is experiencing issues with a modal on their website. On desktop, when the modal is closed, the buttons on the site become unresponsive until the user clicks elsewhere. On mobile, the site becomes completely unresponsive after the modal is closed.

Another community member suggests that the issue may be related to the z-index of sections with a position set on them, and that the video code embed also has a position set to absolute. They recommend fiddling with the indexes to achieve the desired results.

The original poster is unsure which sections need to have a negative index added, and questions whether the modal should fully close without causing issues.

Another community member, Matt, suggests that the issue is related to the relationship between the button and the modal, and that the move animation on the close interaction should be set to "all elements with this class" instead of the sibling setting. This resolves the issue.

Useful resources
LLex Hanley
·

Hi all, can anyone spot wat's happening here? I'm using modal 1. I've connected it to the instagram icons on my site. The modal opens fine but on desktop breakpoints, when i click the cross to close the modal, it closes but every button on my site is then unresponsive until i click anywhere and then things become responsive again, almost as if the cross hasn't fully close the modal or something. On mobile breakpoints it's worse as I can't get my site to respond at all once the modal is closed. Any help much appreciated thankyou: https://preview.webflow.com/preview/louiesimpson?utm_medium=preview_link&utm_source=de[…]05702a5856ce240dcff6100bc7550a08&locale=en&workflow=preview

Attachment
image.png
MMatt Johnson
Marked as solution

yeah naw, its got to do with the relationship from the button to the modal. I'm guessing you changed where the modal is located, thus breaking the interaction.

On the close interaction, ensure that the move animation is set to "all elements with this class" instead of the sibling setting.

View full solution
T
L
M
9 comments
TTayyab Ul Islam

Hi @Lex Hanley, So the issue with this was that sections which have position set to them add a Negative Z-index on them, I have checked out your previewed link and did that and fixed it fixed the problem.

LLex Hanley

Hi Tayyab, thanks for getting back to me. Are you saying I need to add negative indexes to some sections? if so which sections do i need to add a negative index to as I'm not sure which I need to change. Thanks !

TTayyab Ul Islam

yes, Also the video code embed also has a position set to absolute.

TTayyab Ul Islam

You might need to fiddle around some more with the indexes to achieve the results

LLex Hanley

Hi, the vid is set to sticky, it's not absolute. I'm a bit confused with what I need to change , shouldn't the modal just fully close and therefore not be an issue with indexes ?

LLex Hanley

Once it's close it should be closed right, therefore not an issue?

LLex Hanley

Hi @Matt , are you able to shed any light on this one? Thanks!

MMatt Johnson

yeah naw, its got to do with the relationship from the button to the modal. I'm guessing you changed where the modal is located, thus breaking the interaction.

On the close interaction, ensure that the move animation is set to "all elements with this class" instead of the sibling setting.

Attachment
image.png
LLex Hanley

Nice. Cheers @Matt! That's sorted it.

Add a reply
Sign up and join the conversation on Slack