Hello everyone,
I would like to build a blog in which each blog article basically opens as a huge pop-up that covers the whole page. As a reference you can see this video example of Dribbble:
As you can see in the video, when the new pop up opens the URL also changes. So it has a reference link in case I want to send this link to someone.
How can I achieve that? Is that possible to do in Webflow?
Best
Lukas
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Unfortunately the GIF doesn’t show the whole video I recorded. But the URL changes once the product site opens. You can check it with this link as well:
I love how Dribbble does this! Pretty sure this configuration will need some custom coding to achieve.
Yes you can do that, and yes it requires some custom JS, but just a few lines.
I think you could do it with three parts;
POPUP
Your interactions-based modal, which covers the page however you want it to, and contains a large IFRAME. That popup will also have a close button or wrapper area that is clicked to close the modal.
BUTTON
This is your item card, indicating the CMS / blog item you’re going to display. It has the preview, and the you give it a class that your popup is triggered from.
With this setup, each of your collection list items can be clicked, and will trigger the interaction pop-up with a big empty IFRAME. Make sure that’s all working the way you want it to.
SCRIPT
In addition to Webflow’s interaction scripts, we need to add two other scripts to manage the content and the URL changes. They are attached to the same modal open / close trigger elements that have already defined.
Open script- triggers on a click on any of your collection item cards. It sets the IFRAME url, and changes the URL history to reflect the page you’re seeing in the IFRAME.
Close script - changes the URL back to the current page.
Would appreciate a link to a Webflow project where a pop-up modal with a unique URL like this is achieved (preferably CMS)!