• Web accessibility training
• Links
• Creating links
• 5. Linking to a modal (pop-up window) on another T4 webpage

Procedure 5: Linking to a modal (pop-up window) on another T4 webpage

Introduction

If you've completed the introductory training, you'll have already encountered linking to modal windows from the same T4 page.

This page builds on that tutorial to show you how to link to a modal on another page, modal management guidance, and full lists of template support for this type of link.

How to create this type of link

Preparation

Difficulty level: Foundation.

You must have a modal set up and assigned an ID that's unique to the page it's on in order to link to it. If you have editing access to the page you can create a modal yourself, following the instructions in the introductory training.

Whichever method you use to link to the modal, you'll need to know its web address. The following procedure will show you how to find that address:

1. Do you already know the modal's ID number?
   • No: go to step 2.
   • Yes: go to step 4.
2. Do you have T4 editing access to the page containing the modal?
   • Yes: open the modal in T4 to check its ID number, then go to step 4.
   • No: go to step 3.
3. Open the page that contains the modal on the live site. Do you know of a link on this page that opens the modal?
   • Yes: right click on the link and select 'copy clean link'. It's important that you choose 'copy clean link' rather than just 'copy link' to avoid copying over extra code that can sometimes be present. You can test this by pasting the link into notepad – it should look similar to: https://www.exeter.ac.uk/research/institutes/esi/nature/#modal7link. If there's a long string of extra letters and numbers included, then the link isn't clean. When you have a clean link you can exit this preparation and follow Method A or B below.
   • No: in the address field of the browser, add #modalIDlink, to the end of the URL, for example: https://www.exeter.ac.uk/research/institutes/esi/nature/#modalIDlink. Change ID to '1' and press return. A modal should open – if it's the modal you want then you can copy the web address, including the bit at the end; if it's not the right modal, keep changing the number to 2, 3 etc.. until it opens the modal you need, then copy that web address. You can now exit this preparation and follow Method A or B below.
4. Open the page that contains the modal on the live site.
5. In the address field of the browser, add #modalIDlink, to the end of the URL, replacing ID with the ID of the modal. For example: https://www.exeter.ac.uk/research/institutes/esi/nature/#modal7link. Press return – if the address is correct then the modal you want to link to should open. If it's not the correct modal you can experiment with other ID numbers until the correct one opens.
6. When the correct modal has opened, copy the web address including the bit at the end. You're now ready to follow Method A or B below.

Methods

Method A: Using a text editing window

Difficulty level: Foundation

1. Type your link text into the editing window of the template you want to link from.
2. With your mouse, select (highlight) the link text you've just created.
3. Either (whichever you prefer):
   • Click on the 'Insert/edit link' icon in the editing ribbon of the editing window and select 'Link to external site'.
     or
   • Use the keyboard shortcut CTRL + K.
4. In the URL field, paste the web address you prepared earlier.
5. Where it says 'Open link in...' choose 'Current window' or 'New window':
   • 'Current window'
     • This will take the reader directly to the open modal on the other page, and that page will reload in the same window as the current page that's linking to it.
     • This is the default setting and the most commonly chosen one.
     • Go to step 6.
   • 'New window'
     • This will keep the current page open while opening a new page or tab (depending on the reader's browser settings), which will display the other page with the modal open.
     • This option is useful if the reader is likely to want to read the modal alongside your current page.
     • If you choose this option you should add '(opens in new window)' at the end of the 'Text to display' box. So for example, your link may say 'See more about our research into sea turtles (link opens in new window)'.
     • Go to step 6.
6. Save and approve your edit.
7. Preview your edit to check that modal opens as intended.

Method B: Using a URL field

Difficulty level: Foundation.

1. In the URL field, enter the web address you prepared earlier.
2. Save and approve your edit.
3. Preview your edit to check that the link takes the reader to the intended place.

Modal management

• It's a good idea to include the ID number of any modal you create in its T4 name so that you don't have to open it to find that information.
• Be aware that modal links are static. This means that you modal link will break if:
  • The modal number is changed.
  • The modal is moved to a different page.
  • The page containing the modal is renamed.
  • The T4 folder containing that page is renamed.
  For these reasons, you should periodically check your modal link to make sure it still works. This is also one of the reasons why changing the ID of a modal should be undertaken with caution as you won't necessarily know if another page is linking to it. It's not necessary to endure a convoluted numbering order if changing the numbers would make editing clearer and more logical, but this should not happen frequently.

Template support

The templates listed below all support this type of link. The tables will show you which method to use for each template field.