Modal interaction repetition

Hey webflow,

I have 12 buttons on my front page, that all should go to a modal window with a BIO. For some reason when I go to interaction, I can’t seem to connect to the first class: the container and the second class, the specified info for that person.

Only to the first class.

Please let me know how I can do this easily, cause the only way I see now, is to make interactions separately for every modal, which is not efficient.

Best,

Aimanisms


Here is my public share link: LINK
(how to access public share link)

1 Like

Can you share your read-only link please?

Selecting “Limit to nested elements” may solve your problem.

Nope @Hamilton, that didn’t work. Tried it just now.

https://preview.webflow.com/preview/12angryarabs?preview=4f1397dbe53772fddc28228f1788446e

that is my public link. Every picture, should go to a modal, with specific information about that person. The modal itself can stay the same. I just don’t want to copy interactions 12 times. Want to use the same interaction, but for different “modal container” + “classname”

Same modal and one interaction, with different content in the modal each time…

Hmm…

Normally you should build a structure with, for each element, its item and its modal, with its modal content. Then on this elment you’d put an interaction that opens the modal. interaction would uss the limit features to affect only the current item modal. So you would only have 1 interaction that says “open the modal for the current element”

So if I understand you correctly. I can’t copy this effect, even though the model interaction and model structure would be exactly the same. Just the text and picture in each model would be different. This is not possible?

I don’t see how.


All right, then this is a feature that I would like to see :slight_smile: in the future, cause that sucks and is time in efficient.

Interactions 2.0 are coming and I’m sure they address the structure limitations.

Well I’m not sure, that would be cool indeed :slight_smile:

Cool, thanks man for the fast help!

actually, if i’m understanding you right, you can. but, i couldn’t figure this out myself, either. yes, i think it’s an incredibly fatal flaw with webflow. in fact, modal’s were something they themselves suggested were coming 1-2 years ago. but, i digress. if you go to this post:

i think you’ll find your answer. basically, if you nest the “trigger” and the modal together under another element, then you make the interaction only able to affect “sibling elements” - you can then cut and paste this grouping many times, and the edit the content of each. i think this might actually be what vincent was hinting at… so, maybe this isn’t the answer. but, just in case… check it out.

EDIT: oh, and please feel free to chime in on that thread about the main topic: that a year and a half ago they hinted at “more coming” which included tooltips and model elements. i still can’t fathom why they opted for 3d transforms being more important that standard basics like these.

1 Like

Well 3d sounds more cool I guess, to new people coming into the webflow sales funnel. So maybe that was the reason for it.

I agree with you. And thanks for your advise and thread. It works for now.

Try this one maybe. A bit fiddly at first.

First you want to create your modal window. Which I’d imagine to be something like:

<div class="modal-window">

    <div class="close-window">
    </div>

    <div class="profile-full-name">
       <div class="modal-box">
           <h1>Name</h1>
           <p>Information</p>
      </div>

    <div class="profile-full-name-2">
       <div class="modal-box">
           <h1>Name</h1>
           <p>Information</p>
      </div>
    <div>

    etc.

</div>

Set modal-window to 100% width / height, position fixed. Display: Flex (column, centre align).

Style your modal-box however you’d like.

Leave .profile-full-name without styling for now. This will only be used as part of the trigger.

Once you’ve got that, create your interactions, something like this:

Show Modal (This interaction will be on each of your profile images, and the “profile-full-name” will be set individually, meaning you should have 1 interaction per person)

  1. (Targeting “modal-window” On click: Set display: Block)
  2. (Targeting “profile-full-name” On click: Set display: Block)

Close Modal (This will be on your ‘X’ or ‘close’ icon, however you want it)

  1. (Targeting “profile-full-name” On click: Set display none)
  2. (Targeting “modal-window” On click: Set display none)

.profile-full-name Classes (This will be set on the profile classes inside the modal-window)

On each .profile-full-name class…

Say you’ve got .profile-john-doe, .profile-keith-lennon, etc…

Set them to ‘display: none’. This will also make them easier to edit as you create and fill the information in on each one.

Finally, set the “modal-window” to display none.


If you fancy upping the difficulty, you could even create a way of moving through the profiles whilst the modal window is open. You’d need another interaction per person that targets the “profile-full-name” that you want to show, and the rest that you want to hide.

Voila. Let me know if I missed anything.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.