Web Accessibility Training

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

Advisory

The information on this page is only applicable if you're editing the University webpages using T4. It presumes that you have already completed the beginners and advanced level of the T4 basic training (a link for staff only - opens in new window).

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

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.

You'll need to know the ID of the modal in order to link to it:

  • If you have editing access to the page you can open the modal in T4 and check its ID number.
  • If you don't have editing access to that page:
    • open the page that contains the modal in a new tab or window on the live site.
    • find a link on that page that opens the modal
    • hover your mouse over the link and see the web address that appears at the bottom of your browser
    • at the end of your web address you'll see 'modalIDlink', where 'ID' is replaced by a number – this is the number you need.
    • if there is no link to the modal (or you can't find one), you'll need to either contact the editor of the page, or the web team, and ask them to tell you the modal's ID.

Methods

The method to use will depend on the template you're using. If you're not sure which method to use, refer to template support.

Method A: Using a text editing window

Difficulty level: Foundation. This method has several steps, but they're straightforward.

  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. Follow option a or b from the instructions below – whichever you find easier:

      1. open the page you want to link to in a new tab or window on the live site and copy its web address.
      2. Return to your content editor and paste that address into the URL field, followed by #modalIDlink, replacing ID with the ID of the modal you want to link to. For example: https://www.exeter.ac.uk/research/institutes/esi/nature/#modal7link.
      3. Go to step 6.

      1. If you already know of a link on the other page that opens the modal, you can simply right click on it and select 'copy clean link', then paste it into the URL field.
      2. An advantage of this method is that you won't need to know the ID of the modal in order to link to it.
      3. 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.
      4. Your link 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.
      5. Go to step 6.
  6. 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 7.
    • '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 7.
  7. Save and approve your edit.
  8. Preview your edit to check that modal opens as intended.

Method B: Creating a full panel link

Difficulty level: Foundation

  1. In the Panel template, enter the ID number alone into the field 'Full panel link (external page)'.(Do not use the form #modal[ID]link here, as it won't work.)
  2. Save and approve your edit.
  3. Preview your edit to check that 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 link takes the reader to the intended place.