DesignPLUS Dialog Boxes

Dialog Boxes are interactive pop-ups that appear when a user clicks a specific word or phrase. They are an excellent tool for keeping your course pages clean and streamlined.

  • Visual Focus: They use a “lightbox” effect, dimming the main screen to highlight the newly opened content box.
    • An alternative to the Dialog Box is the Popover.
  • Extra Context: They allow you to provide on-demand access to supplementary details—including lengthy text, images, videos, or other media—without cluttering your main page design.

Adding a Dialog Box to a Content Page

You can add as many Dialog Boxes as needed to a content page within your Canvas course.

While editing content in your Canvas course, launch the DesignPLUS Sidebar by clicking on the 🚀 rocket ship icon at the top right corner of the screen.

  • Alternatively, press Alt/Option + Shift + D on your keyboard.

Within your paragraph of text, highlight the word or phrase you would like to make as a Dialog Box.

  • Alternatively, place your cursor within a paragraph of text at the point where you want to insert the Dialog Box.

In the DesignPLUS Sidebar, click on the ➕ Add New Elements tab.

Click the Dialog Box button (found under the Interactive Content or Recently Used Tools headings).

  • Alternatively, use the Search textbox to search for Dialog Box. DesignPLUS will show results in real-time. Click the ✖️ icon to clear your search.
A screenshot of the DesignPLUS Sidebar demonstrates accessing the 'Dialog Box' tool. An initial arrow points to the 'Add New Elements' tab in the top navigation bar, which features a large plus sign and is the currently active view. Within the 'Add New Elements' panel, two other arrows highlight the primary methods for finding the tool: one points to the 'Search' input field, and the other points directly to the 'Dialog Box' button, which has an icon of two overlapping windows and is located in the 'Recently Used Tools' list. Other un-highlighted tools like 'Popover' and 'Tooltip' are also visible nearby.

Content Panel

In the following example, when a student clicks on the acronym LMS, a Dialog Box appears displaying a short paragraph and image of the Canvas Learning Management System Dashboard.

A student-facing view of a Canvas content page, titled with a large heading "Dialog Box" in a gray font, displays a single sentence of text: "The new software update significantly improves the [purple and underlined link] LMS response time." Within this sentence, the acronym "LMS" is clearly formatted as an active, purple, underlined hyperlink. This view shows the static state of the page as a student first encounters it, where the purple hyperlink serves as the interactive trigger. Clicking this link is the action that would activate the associated Dialog Box content, which is the tool being demonstrated. The background is clean and white, with no tooltips or other interface elements visible.

A screenshot of a Canvas LMS content page from a student's perspective shows an active dialog box overlay. A large modal window, titled in bold as 'Learning Management System,' features a prominent 'X' close button in the top-right corner. The main body of the dialog box contains a paragraph of descriptive text defining Canvas and its features, immediately followed by a complex, embedded screenshot of a Canvas Dashboard, which includes course cards and a global navigation bar with 'Account,' 'Dashboard' (active), and other links. The regular page content in the background, including the title 'Dialog Box' and part of a sentence, is dimmed and partially obscured, emphasizing the interactive popup. This view demonstrates how the dialog box can house both text and media content.

It is highly recommended to use the Content panel to make any updates to your Dialog Box(es). This panel provides dedicated textboxes to safely edit specific parts of the tool:

  • Trigger Text: The visible word or phrase that students click on.
  • Dialog Box Title: The title that displays at the top of the dialog box for you and your students.
  • Dialog Box Width (px or %): Set the width of the dialog box in either pixels (px) or percentage (%).
  • 🔁 Convert to Popover: Convert the Dialog Box to the Popover tool.
A screenshot focuses on the expanded 'Content' configuration panel for the 'Dialog Box' tool in the DesignPLUS Sidebar. The blue header bar is titled 'Content' with a downward expansion arrow. The panel displays three text input fields with corresponding labels: the 'Trigger Text' field is filled with 'LMS'; the 'Dialog Box Title' field contains 'Learning Management System'; and the 'Dialog Box Width (px or %)' field shows a width of '600px'. Below these inputs is a light gray button with opposing arrows and the text 'Convert to Popover'.

After editing the text in the Content panel, press Enter on your keyboard or click anywhere outside the text box to update the Canvas Rich Content Editor (RCE).

Inside the Canvas RCE, locate the light gray area tagged with Modal Content. You can use this space to add any text, images, videos, or other media you want to display in your Dialog Box.

A screenshot of the Canvas LMS Rich Content Editor (RCE) with the toolbar visible at the top, showing an open Dialog Box (Modal) element. A sentence in the text editor reads, 'The new software update significantly improves the LMS response time.' The acronym 'LMS' is underlined, and a small tag with the text 'Modal' is placed immediately after it. Below this text, a large modal window is open, overlaid on the main content area. A small dark tab in the top-right corner of the modal reads 'Modal Content'. The modal contains a bold title, 'Learning Management System', followed by a descriptive paragraph of text defining Canvas LMS. Below the text is an embedded screenshot of a Canvas user dashboard, which includes a global navigation sidebar with an active 'Dashboard' icon and a main content area titled 'Published Courses (14)' with colorful course tiles, including one for 'ALL USERS'.

Save or Save & Publish your content page to test out the Dialog Box.

Additional Resources