Modals

Modals

A modal window 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 windows are essentially a less intrusive version of pop up windows. With this comparison in mind, it is good to use modal windows sparingly.

Appropriate use cases for modal windows 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

To create modals within your Carleton CMS pages, use the shortcodes outlined below. Note: this is not a core feature, meaning we do not support direct training for modals and are recommended for advanced users only.

To create a modal window:

  1. Publish a new page with content that you want to pop up in a modal.
  2. Edit the page to which you want to add the modal.
  3. Place your cursor in the content editing box where you would like to insert your window.
  4. Select the modal button from the toolbar as shown below.Modals
  5. Choose ‘Carleton Page’ from the drop-down menu.
  6. From the ‘One of your pages’ drop-down menu, choose the name of the page you created.
  7. Under ‘Text Options’ enter the text for the link and the title for the modal.
  8. Click Insert Modal Link.
  9. A piece of shortcode will appear in your content. Update the page.

To create a modal window linking to an external page:

  1. Publish a new page with content that you want to pop up in a modal.
  2. Edit the page to which you want to add the modal.
  3. Place your cursor in the content editing box where you would like to insert your window.
  4. Select the modal button from the toolbar as shown below.Modals
  5. Choose ‘External page’ from the drop-down menu.
  6. Paste the URL of the external page in the External URL field.
  7. Under ‘Text Options’ enter the text for the link and the title for the modal.
  8. Click Insert Modal Link.
  9. A piece of shortcode will appear in your content. Update the page.

Creating Image, Video and Slideshow Modals

You can easily display any single image or video in a modal. This is good for having thumbnails popup full size media. You can also display groupings of images that users can easily view by hitting the right arrow key or clicking forward or back on them.

To create a simple image modal:

  1. Upload the image into the media library.
  2. Edit the page to which you want to add the modal.
  3. Select the modal button as shown below.Modals
  4. Choose ‘Image’ from the drop-down menu.
  5. From the ‘One of your images’ drop-down menu, choose the name of the image you uploaded.
  6. Under ‘Text Options’ enter the text for the link and the title for the modal.
  7. Click Insert Modal Link.
  8. A piece of shortcode will appear in your content. Update the page.

To create a video modal:

  1. Upload your video to YouTube or Vimeo.
  2. Edit the page to which you want to add the modal.
  3. Select the modal button as shown below.Modals
  4. Choose ‘Video’ from the drop-down menu.
  5. Paste the URL of the uploaded video into the URL field.
  6. Under ‘Text Options’ enter the text for the link and the title for the modal.
  7. Click Insert Modal Link.
  8. A piece of shortcode will appear in your content. Update the page.

To create a Slideshow modal:

Click here for instruction on creating a Slideshows.