Pop-Up Dialog Box

Popup boxes are a great tool for condensing information and creating a less cluttered page. Below is an example with the code snippet used to create it. Click the button to view the popup. Popup dialog box is closed using the "X" in upper right corner. You can use these to provide further explanations, definitions of a term, or as seen in the variation below an image or video file. In the Style Guide, these are referred to as "Enhanceable Dialog Boxes". Click on the button to test.

Example

 

Click Here to See the Dialog

Anatomy of Code Snippet

Anatomy_of_Popup_Box_Snippet.png

 Variation

 

George Washington

 

Code for the Variation Above

<div id="dialog_for_George_Washington" class="enhanceable_content dialog"><img src="https://resources.instructure.com/files/14235/download?download_frd=1;">
</div><p><a id="link1" class="Button" href="#dialog_for_George_Washington">George Washington</a></p>

 

How to Do This

  • Copy the code snippet at the top of this page,
  • Navigate to a content page where you want to add this feature, or create a new page,
  • Click "Edit", then switch to HTML Editor,
  • Paste the copied snippet where you wish to place the button (remember, it is easier to hit enter a couple times before and after pasting to make it easier to edit the snippet),
  • Modify as desired to fit your need:
    • Replace the yellow highlighted code text with your name for the object. You can leave it named "Link 1", but if you want to reuse this snippet, it is easier to identify which one it is by logically naming it. REMEMBER TO CHANGE ALL THREE NAME REFERENCES!
    • Replace the green highlighted text with your content to be included in the popup dialog box,
      • If you intend to use an image or video (as shown in the variation above), the file must be loaded into your classroom first
    • Change the blue highlighted text that will show on the button

NOTE: you will not see the button until you "Save" your content page.

You can also use the Rich Content Editor to change the position of the button after you have created it - Click on the blue link text (same as text in button), and use Rich Content Editor to move.

 

While the box width is set at 300px in the Style Guide, you can drag the corners in the Rich Content Editor to make it wider, and when you do this Canvas still displays a 300px wide box, but adds a scroll bar.

 

Added to CanvasHacks Demo Course by Kelley Meeusen, contributed to Canvas Community by Jeremy Perkins.