I’ve been using the accessible modal that Webflow provided in the showcase:
TL;DR: How can I change the code so the modal does not need to be placed exactly beside the button that opens the modal?
It only works for me when the modal wrapper is placed directly next to the button that opens the modal. (so on the same level as the button, directly following the button).
In the code, it seems to look for the ‘closest’ item with the modal wrapper class. I expected that this means it also works if the modal-wrapper is placed further down in the code… But it doesn’t.
The reason I’m asking is that I want to use the modal where the open button sits in a slider (with Splide Slider). And for the modal wrapper to open fullscreen, it needs to be outside that slider.
Very good question and it is crucial that you understand how and why.
The interaction only works when the modal-wrapper element is beside the button — or should I say when the modal-wrapper is a sibling of the button — because the Interaction attached to the button specifically says so:
Why did the dev do this? Because this way he can reuse the Interaction on all the buttons, as the effects will be limited to siblings elements of the button.
Defining your structure of elements and their relationships (siblings, parent…) is entirely part of the interaction strategy, and influenced by the fact that you have — or not — to reuse the Interaction on many elements.
So you may not always find a way to do exactly what you wanted to do. But there are always other methods to achieve your goal.
Thanks so much for taking the time.
I understand your point. I wouldn’t want multiple modals to open with one click.
But if this weren’t an issue… changing the webflow interaction to “any element with the class” is no issue. But then the accessibility code doesn’t work. Would you know how I could change
findModal($(this).next());
so that it finds any element with a certain class?
