Modal pop-up inside collection item not closing properly (it closes, re-opens and re-closes really fast)

Good evening everyone,

I am building a website for a venture capital business.

In the portfolio page, they want to showcase all of their clients. When clicking on one of them, a pop-up appears with the client’s logo, description and call to action button to land on their website.

Basically the collection item “portfolio_page_item” contains 2 div blocks named “fbv_client_wrapper”: one is only visible if the client is “active” and the other one is visible if the client has “exited”. They are basically identical div blocks, only the background colour changes and in the “exited” div block there is a text saying “exited”.

Inside each of these 2 div blocks, there is a div block named “modal_wrapper” which appears on click. The pop-up can then be closed by clicking on the X button “close_button_wrapper” or by clicking around it “close_area”.

When clicking to close it, however, the modal wrapper seems to be closing, re-opening and re-closing very fast.

Could someone help me figure out why please? I would be eternally grateful!

Ultimately, I have noticed another bug, when opening the pop-up for your mobile phone (safari) and scrolling down the page, the pop-up glitches.

This is the live page: Portfolio
This is the public share link: Webflow - First Bridge Ventures

I look forward to hearing from you and thank you so much in advance for your precious help!

All the best,
Ginevra

Hey Ginevra!

You might be interested in Finsweet’s model attribute. For simple use cases, it really eases the process.

Let me know if you need any help or if this isn’t feasible for you!

Hi @RoryVB thank you so much for sending me this link! I have just tried it out and it works really well! Quite easy to implement too. However, it always opens up the same client unfortunately (Tiller)… Maybe this solutions does not work in dynamic collections?

Hi @RoryVB I managed to solve it by adding 3 new CMS text fields.

Example:

Client 1

Text field 1
Name: Modal number
Value: modal-1

Text field 2
Name: Open number
Value: open-1

Text field 3
Name: Close number
Value: close-1

Each CMS item must have a unique number (e.g., 1) and the same one must be used in the 3 fields (modal-1, open-1, close-1).

I then followed Finsweet tutorial and added the dynamic attribute value.

Screenshot 2023-06-19 at 20.43.44

Thank you so much again for sending me this tutorial!

Perfect! Should’ve mentioned that you do in fact need to add a generated CMS number to the end of each model attribute name.

Glad to have been of help :slight_smile:

1 Like