🍬 Pop-Ups

Creating Pop-Ups header

Get a taste for the code by exploring the sample below.

Note: The button below is included after a drag and drop activity to display the correct answer. The drag and drop activity is not included here as the focus is on the pop-up.

✅ Correct Answer

Now, it's your turn! Copy the code below and paste it into a page in your sandbox course (a course you can "play" in). Add ingredients to make it your own.

<p>Pop-up Content</p>

</div>

<p><span style="font-size: 14pt;"><a id="popup1" class="Button" href="#dialog_for_popup1">Button Text</a></span></p>

🏆 PRO TIPS:

⭐ You can link a pop-up to buttons, images, or text. You will need to keep the link element (<a>), the id, and the href. You can remove the class from the code above if you do not want a button. Then, replace "Button Text" with your desired text or image.

⭐ Use pop-ups to add pro tips, feedback, and other information to a page.

⭐ You can include text, images, videos, and more in your pop-up window. Just note that the width of the pop-up is limited to 300px.

Now that you've had a chance to play with the code, how might you use Tabs in your Canvas courses? Add your ideas to the Padlet below and then we'll discuss them!

🖱️ Open me in a new tab. Links to an external site.