• Web accessibility training
• Links
• Creating links
• 3. Linking to a modal (pop-up window) on the same page

Procedure 3: Linking to a modal (pop-up window) on the same page

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 with in-depth guidance and full lists of template support for this type of link.

How to create this type of link

Preparation

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. The introductory training covers how to do this.

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. Click on the 'Insert/edit link' icon in the editing ribbon of the editing window.
4. Select 'Link to external site' or use the keyboard shortcut CTRL + K.
5. In the URL box type #modalIDlink, replacing ID with the ID of the modal you want to link to, for example #modal1link or #modal12link.
6. Where it says 'Open link in current window', you do not need to change this to say 'New window' – you can leave this setting as it is.
7. Save and approve your edit.
8. Preview your edit to check that the modal opens as intended.

Method B: Creating a full panel link

Difficulty level: Foundation

1. In the Panel template, go to the field 'Full panel link (external page)' and enter either:
   • the ID number alone
     or
   • #modal[ID]link, replacing ID with the ID of the modal you want to link to, for example #modal1link or #modal12link.
   Most editors just use the ID alone, but both methods are fine.
2. Save and approve your edit.
3. Preview your edit to check that the modal opens as intended.

Method C: Using a URL field

Difficulty level: Foundation.

1. In the URL field type #modalIDlink, replacing ID with the ID of the modal you want to link to, for example #modal1link or #modal12link.
2. Save and approve your edit.
3. Preview your edit to check that the modal opens as intended.

Modal management

Naming a modal

It's a good idea to include the ID number of your modal in its T4 name so that you don't have to open it to find that information.

Deleting a modal

Modal links are static. This means that when you delete a Modal, T4 won't warn you of any links pointing to it, so you will need to find and delete these yourself to avoid broken links.

For this reason, if your page contains a lot of content, or a lot of links, it's a good idea for any piece of content that links to a modal to state in its T4 name that it contains a modal link with the ID of the modal, for example 'More information (link to modal 4)'.

This is so that you (or another editor) won't later have to hunt through your page to find any links to a modal that needs to be renumbered or removed.

Changing a modal's ID number

If you ever change a modal's ID number:

• you must remember to also change that number in:
  • that modal's T4 name.
  • any link on your page that opens that modal. All modal links are static (not dynamic) which means that T4 won't automatically update them when they're altered. If you don't manually change the number in those links then they will break.
  • the T4 name of any content linking to that modal (if indicated there).
• be aware that any links on other pages to your modal will break. You may not be aware of them to update them, and T4 has no way of tracking them. Editors managing these sorts of links should periodically check them so that they can be edited if necessary, but you should be aware that it may create this extra work.

For these reasons, changing the ID of a modal should be undertaken with caution. It's not necessary to endure a convoluted numbering order if changing modal 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.

Note that some of the fields listed here state 'external page' or 'external website'. You can ignore this – it doesn't mean you're linking to an external location.