Lightbox

A lightbox pattern on a website is a design technique that involves displaying content in an overlay on top of the main content of a webpage, dimming or obscuring the background. It is a type of modal window that appears after clicking a button and can help draw attention to the media element and provide a distraction-free viewing experience.

This module offers an accessible lightbox (using Modaal).

General Tab

In the General tab of the module, there are the following fields available:

• Lightbox Button Text: This is the text that will display within the button that triggers the lightbox to open. To ensure this button text is accessible, no not use text like “read more.” Instead, use descriptive text to make it clear what happens when someone clicks the button. Example: “view ____”.
• Lightbox Button Icon (optional): If you want to include an icon on the button, you may select one here.
• Lightbox Content: This is the content that will appear in the lightbox.

Style Tab

There are no style options for this module currently.

Advanced Tab

In the Advanced tab of the module, there are all the usual settings for margins, visibility, and advanced HTML settings.