1. Step-by-Step
    1. Create a modal link
  2. Video Tutorial
    1. Transcript
  3. Try It Out!

Modal links are a dynamic way to display important information and access different content without having to leave the page. A modal link is an additional window that appears and requires the user to interact with it before they can return to the parent (original) window. They are also often referred to as ‘dialogue boxes’ or ‘dialogue windows’. Modal links are essentially a less intrusive version of pop up windows. With this comparison in mind, it is good to use modal links sparingly.

Appropriate use cases for modal links include:

  • Drawing attention to vital pieces of information
  • Completing action items without exiting a window
  • Reusing content across a site
  • Accessing different content types such as watching videos and filling out forms

Below are four sample modals, one for each type of modal.

Sample Carleton page modal: Introduction to CMS Training

Sample video modal: Gallery Tutorial

Sample image modal: CMS Training Logo

Sample external modal: WebAIM Alternative Text


Create a modal link

  1. Open the page or post to which you want to add the modal.
  2. Click Add Post Element located above the Content Editor.
  3. Click the Modal link icon
  4. Choose your modal type:
    1. External: these modals link to external web pages.
    2. Carleton page: these modals link to pages within your site.
    3. Video: these modals link to YouTube or Vimeo videos
    4. Image: these modals link to images from your media library. You can also upload images to your media library while creating an image modal.
  5. Link to your modal content:
    1. External: paste the URL of the page you wish to create a modal of in the External URL field.
    2. Carleton page: find your page from the dropdown menu labeled One of your pages.
    3. Video: paste the URL of your video in the URL (Youtube or Vimeo) field.
    4. Image: click Select Attachment and then either choose your image from the Media Library tab or upload it using the Upload Files tab.
  6. Fill in the Text for the link field. This is what will appear on the page.
  7. Fill in the Title for the modal field. This will not appear on the page.
  8. Click Insert Element.

Video Tutorial


Try It Out!

Here are a series of tasks to try out using modal links.

  1. Brainstorm situations where modal links might be appropriate to add to a page or post.
  2. Brainstorm situations where modal links might be intrusive or inconvenient to have on a page or post.
  3. Add a modal link of any type to your test page.