Modal Links - Carleton CMS Help Centre

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

Step-by-Step

Create a modal link

Open the page or post to which you want to add the modal.
Click Add Post Element located above the Content Editor.
Click the Modal link icon
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.
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.
Fill in the Text for the link field. This is what will appear on the page.
Fill in the Title for the modal field. This will not appear on the page.
Click Insert Element.

Video Tutorial

Transcript

Module Three: Modal Links

Hello and welcome to Module 3 of our Advanced CMS Training. This video will discuss modal links. Modal links are links that open a new window within the page you are browsing. These can be used to display internal or external web pages, images, or videos.

To add a modal link to your page or post, click Add Post Element. Then click Modal link.

Next, you’ll need to select the type of modal link you want to create. We’ll demonstrate inserting an image modal link, but each type is fairly similar. Fill out the field that appears with the content you want to insert as a modal link.

For the image modal, you can choose images either by uploading them from your device, or by selecting them from the Media Library. Click the image you would like to insert and then click Select.

Next, fill out the Text for the link and the Title for the modal fields.

Then click Insert Element.

Try It Out!

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

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

Next: Buttons

Share: Twitter, Facebook
Short URL: https://carleton.ca/cms-help/?p=1389