HTML: Pop-up Dialogue Box

Pop-up dialogue boxes allow students to click buttons have new text appear without leaving the page. They are a great tool for condensing information and creating a less cluttered page.

 

Example 

Click Here

 

Anatomy of Code Snippet
Screen Shot 2017-06-07 at 3.34.37 PM.png

 

How to Add a Pop-up Dialogue Box

1. Copy the code snippet:

<div id="dialog_for_link1" class="enhanceable_content dialog">Text you want to pop up. This can be as long as you want, but be aware that the width is set for 300px </div><p><a id="link1" class="Button" href="#dialog_for_link1">Click Here</a></p>

 

2. Navigate to a content page, click Edit, and select the HTML Editor.

3. Paste the copied snippet & edit the text that will show on the button and in the pop-up box.

 

Note: You will not see your button until you save your content page.