CMS Modal opens within div

Community resources General
1

Hi Everyone,

I created a slider that uses information from a collection list.
I want now that by clicking on the “read full review” button to open a modal with content from the same collection list.
Everything works ok but the modal, and modal background open within the slider div. and it is cropped, I want the modal to open in the middle and not within the div so that all the content can be visible.
What am I doing wrong?

This is a read-only link
https://preview.webflow.com/preview/rh-staging?utm_medium=preview_link&utm_source=designer&utm_content=rh-staging&preview=fa064c16664b81aff1a7b604804ac469&workflow=preview

Thank you!

2

I usually use this approach;

Or more recently if I want to skip the interactions setup, this one;

In your case since you’re within a slider, it’s likely to have overflow: hidden which will compete with your popup.

One option is to move the popups outside of the slider, into a separate collection list, and then trigger the opening remotely by script clicking a hidden trigger button.

1 Like
3

Thank you! Do you mean creating a new collection list with the extra information that will be included in the popup? then the “read full review” button must trigger each modal for each review.
Not sure how to do this but I will investigate.

4

Think of it as two parts;
Your Slider, which contains your pop-up trigger buttons

Slider
  Slide 1
    Button A
  Slide 2
    Button B

And your separate collection list containing the Modal content. Here you have a hidden trigger button that directly triggers the interaction.

Collection List Wrapper
  Collection List
    Collection Item 
      Modal Div A
        Hidden Modal Trigger Button A
        Modal Content A
    Collection Item 
      Modal Div B
        Hidden Modal Trigger Button B
        Modal Content B

You need a bit of Javascript to connect that together to that a click on Button A finds and clicks that corresponding Hidden Modal Trigger Button A

This setup lets you do the interaction triggering easily, but with more flexibility on the trigger setup, and more flexibility on the modal positioning.

It has been some time since I’ve used it and I suspect the documentation needs an update, but SA5 has this feature-

1 Like