CidiLabs Modals - Texas State Technical College

Modals are a useful tool for providing supplementary information without overwhelming the main content. They help maintain a clean and organized layout while still offering students access to important details as needed.

Features

Key Features and Benefits

Interactivity: Allows students to click on highlighted text to open modals with additional information.
Accessibility: Fully accessible to all users, including keyboard navigation support.
Customization: Allows customization of modal content and appearance to fit various instructional needs.

Code Snippet

Canvas Page Wrapper

If you are pasting this into a page that already has work in it, you will likely already have a wrapper in place. If you are starting with an empty page, you will need to add this wrapper. Be sure to place your end div at the end of the code.


<div id="dp-wrapper" class="dp-wrapper dp-flat-sections">

Code Snippet

This is the template code for this activity.

Modal Template

      
      <p><a id="dpPopup0" class="dp-popover-trigger" href="#dpPopup0Content" aria-describedby="#dpPopup0Content">Trigger Text</a></p>
    <div id="dpPopup0Content" class="dp-popover-content dp-popup-content" style="border: 1px solid #A9A9A9; background: #f7f7f7; padding: 10px; width: 600px; max-width: 100%; margin: auto; border-radius: 3px;">
        <p>Content</p>
    </div>