Unique link to a hidden modal in cms collection

[megancharlotte (Megan Karbowski)]

Hi

I have a cms collection with a modal inside of each item and I’d like to be able to link users to each modal with a unique link. The modals are hidden though until the user clicks on the collection item.

Any ideas on how to do this would be appreciated!

Thanks!

---

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

[Stan (justAnotherDeveloper)]

hi @megancharlotte the easiest way is to add link field to CMS and connect to this link in modal. The result will be each modal with unique link to case study. Is this you are looking for?

[megancharlotte (Megan Karbowski)]

Hi @Stan - thanks for your reply.

No, that is not what I’m looking for - I want to be able to link users directly to specific modals - for example, I want to be able to send a user a link like website.com/case-study-modal-1 and for them to be able to follow that link directly to the page website.com but for the specific modal to be open when the page loads.

[Stan (justAnotherDeveloper)]

hi @megancharlotte yes it can be done via query selectors but it need a bit complex code. Because you have your modal in collection and simple code will open modal for ALL items in collection. The way around in principle is that you can work with indexes or better will be to add custom attribute to each modal.

Next step should be set query selector for each URL (eg. https://yourwebsite.com?modal=3) . Next you will need function that will filter (find) modal that match query and display it.
Next step will be to remove this query without refreshing page to be able continue on website when modal will be closed. etc. etc. Not easy but can be done. You can search terms like.
setAttribute,
getAttribute
window.location.href,
new URLSearchParams(window.location.search),
Object.fromEntries(urlSearchParams.entries())
etc.

This is very short explanation of one way how it can be done. To avoid this hassle why you just do not send link directly to “case study”?

Sorry I can’t help more

[Stan (justAnotherDeveloper)]

hi @megancharlotte I have done very simple working example to get an idea and have something to start with.

When you go to this url https://modal-query.webflow.io/modals and add a query data with some value between 1-27 (there is 27 herbs) page will open modal related to herb that is assign to.

The query named data is just any name you give this query and it can be honkydonky if you want but you have to refer to this name in function you can find in page setting on top.

just in case you do not know how to add query here is example of link
https://modal-query.webflow.io/modals?data=4

and code you will find in page setting is this.

const modals = document.querySelectorAll(".modal_container")
const url = window.location.href
const urlSearchParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries());

modals.forEach((modal, idx)=>{
	modal.setAttribute('data-modal-id', idx+1)
	openModalOnLoad(modal, idx)
})

function openModalOnLoad(modal, idx){
const target =	modal.getAttribute('data-modal-id')

if(params.data == target){
	modal.style.display = "block"
	}else{
		return
	}
window.history.pushState({}, "", url.split("?")[0]);

}

Please keep in mind that is a bare bone code with basic functionality to have something to start with.
read only
Hope this will help solve your request.