Unique URL Modal/Tab with CMS

Design help Custom code
1

Hi,

i was wondering, if we can have modals with unique urls. And obviously we can:

But now i am wondering if this could work with dynamic content too?
For example on Twitter every post has a modal with its own unique url.
In my case i want to create a (collection) list of events. Clicking on one event should open a modal with additional information and this modal should have its own url.
All powered by the Webflow CMS.
The modal would be the replacement for the collection page so to speak.

Would appriceate any thouhts and ideas!

2

I’m looking for an answer on this one too… Anybody can help us?

3

Also keen to create this for product views. Any thoughts?

4

+1 on this. Has anyone managed to figure this out? @Sebastian_Zimmer

5

@andydaoo Not yet, the project i was working on is on hold :slight_smile:

6

has anyone found a solution to this?

7

From OP’s spec, I’d build it like this.

Build your CMS-driven modals, with a button trigger, inside of your Collection List. Complete that so that clicking a button on any particular item will open that specific modal.

Now give the button itself a custom attribute something like modal-trigger = and then CMS bind that attribute to the slug. And then, hide that button with display: none.

In JS, you need two parts.

First part is to add a click event handler to all of your CMS items, which will trigger a piece of JS-

  • It finds and clicks the appropriate hidden button for that item ( it can just search children of the clicked element, for simplicity ).
  • It updates the URL to add a hash of the slug, which is stored in that button’s modal-trigger.

Second part is on page load when the DOM is completed loading, check for that hash. If there is one, search for a button with the matching modal-trigger attribute. If one is found, click it to invoke that dialog.

You now have…

  • CMS driven modals
  • Invoked by click on the CMS item ( or a designated part of it )
  • Modal-specific URLs that appear when the modal opens
  • Automatic modal triggering when someone revisits that URL

I’d probably also add a handler for modal close, to clear that hash from the URL just to keep things clean.