T4 tips : Modals - More than just a popup

James Leah

Front End Web Developer

Link directly to the important content!

2024 update - no longer works

Unfortunately, as of 2024, direct linking to modals no longer works.

Linking direct to a modal

The 2017 template brought a bit of a hiden gem in the fact that we can now link direct to a modal like you would for an acutual webpage, in this example i'll be linking to the modal on the webteam demo page - http://blogs.hud.ac.uk/webteam/demo/modal/#!/?modal=1.

This nifty trick is really useful for when you need to display content but you don't necasserily need to have a page specifically for it. You can see from the apove link that we have added a code to the end of the url which tells the browser to open the modal when the page loads. 

Note

Linking to a modal on the same page using this method will NOT work. You should add the id of the modal to one of the call to action content types in the 'modal id' field.

First step

The first step would be to find the webpage on our site that has a modal on that you want to link to and open the modal

Getting the modal ID

Now the modal is open go to the address bar and copy and paste the full url which should be something like this - http://somedomain.co.uk/#!#idofmodal

Here is the url i have copied from the address bar of the example demo page it has this url and the id of the modal  http://blogs.hud.ac.uk/webteam/demo/modal/#!#1 the id of the modal is anything after the last # so the modal id is 1 in this example. 

 

 

modal open for the link to modal blog post

Constructing the final url

Now we have to url of the page which contains the id of the modal we just need to tweak the url to make it work. 

Current url -  http://blogs.hud.ac.uk/webteam/demo/modal/#!#1 

Firstly make sure to remember the id of the modal, then remove the hash and the id from the url.

Removed id url -  http://blogs.hud.ac.uk/webteam/demo/modal/#!

Secondly we are then going to add /?modal=idgoeshere to the end of the url, replacing 'idgoeshere' with the id of the modal. 

Final url - http://blogs.hud.ac.uk/webteam/demo/modal/#!/?modal=1

 

Tip

If using this method it would be a good idea to use the shortlink tool which can be found at http://hud.ac. If for some reason the modal id changes or the url is changed then you only have to update the link in once place rather than on everypage you have used the link. It is best practice to use the shortlink tool when linking to an absolute path.