Need Help with Dynamic Blog Modals and URL Structure

Hello Webflow community,

I’m working on a project where I have a CMS Collection List displaying a grid of blog posts on my website. My goal is to create a user-friendly experience where users can click on a blog post, and a modal pops up displaying the full blog content, all while changing the URL dynamically. This way, I can easily share the blog post with others by simply copying the web URL.

What I’ve Done:

CMS Collection: I’ve set up a CMS collection for my blog posts, including fields for title, content, image, and other relevant information.

Modal Implementation: I’ve successfully implemented a modal that opens when a user clicks on a blog post. The modal displays the full blog content, and users can close it to return to the grid of blog posts.

The Problem:

While the modal implementation works as intended, I’m facing challenges with the URL structure. I want the URL to change dynamically based on the blog post that’s opened in the modal. For example, if a user clicks on “10 Tips for Web Designers,” I want the URL to change to something like “haks.agency/blog/10-tips-for-web-designers”

Attempts Made:

Accessible Modal Popups (Finsweet): I’ve tried using the Accessible Modal Popups from Finsweet, but it doesn’t fully meet my requirements for changing the URL dynamically.

Iframe: I also attempted to use iframes to display the content in the modal, but it resulted in complications and didn’t provide the desired URL structure.

What I’m Seeking Help With:

I’m looking for guidance on the best approach to achieve the following:

Implement a modal that opens when clicking on a blog post grid item, displaying the full blog content.
Change the URL dynamically to reflect the selected blog post, allowing for easy sharing of the blog post via the URL.


Additional Information:

Here’s a read only link where you can see the current implementation: Read only Link

Here’s a link to the published website because for some reason the functionality isn’t working on the read only link: My website

And here’s a link to a similar functionality that I’m trying to create. Look what happens when you click on a blog card: Example Link

I would greatly appreciate any insights, tips, or code examples that could help me achieve this functionality. Thank you in advance for your assistance!

Hi Solu,

You’d use pushState or replaceState on the browser’s history API depending on the effect you want. To activate it you’ll need to set your own event handlers alongside the open and close click triggers you’re using in your modal interactions.