The HTML Lightbox On Click action displays HTML content by filling the screen and dimming the rest of the page with a semitransparent overlay. You can close the lightbox by clicking either the overlay mask or a close button incorporated into the HTML with a defined class attribute. The action also appends included CSS styles in the
<head> of the page.
The HTML content you input into the HTML code editor appears on the page as part of a full-page overlay that dims all other content on the page with a semitransparent mask.
Any HTML content with the proper class binds to the close button function. Close button classes should correspond to the optional close button class input or use the default
lightboxClose class. You can also use a link with a
This input controls the width of the lightbox in pixels.
This input controls the height of the lightbox in pixels.
The basic lightbox identifier is a number that you select between 0 and 31. It's used to distinguish an experience's lightbox from any other lightboxes and their display frequencies.
This input works with the lightbox ID to control the frequency that a lightbox is shown to a specific visitor or segment. Several options are available:
- Every page
- Once per session
- Once per thirty days
- Once, ever
- Once every 'X' days
Monetate appends anything you add in the CSS editor to a stylesheet in the
<head> portion of your site in a
<style> block. These styles are available on this page for use with any page element.
This input appends a class to the lightbox content wrapper for styling purposes.
By default, the lightbox has an ID of
#monetate_lightbox_content_container. However, this ID is used to wrap all Monetate lightboxes, so an additional class is useful to apply specific styles only to certain lightboxes.
Close Button Class
By default, the HTML lightbox binds a close function to any element within the HTML content with a class of
lightboxClose, but you can add an additional close button class with this input.
This input sets the distance in pixels of the lightbox content from the top of the viewport. By default, the lightbox content is 15% of the total height of the visitor's screen from the top of the viewport.
This input sets set the distance in pixels of the lightbox content from the left side of the viewport. By default, the lightbox content is centered within the viewport.
Pin Lightbox Position
This setting controls the position property of the lightbox content.
If you set this input to NO, then Monetate sets the lightbox position to
relative and the lightbox content doesn't scroll with the page. If you set the input to YES, then Monetate sets the lightbox content position to
fixed and the lightbox content scrolls with the page.
This input controls the
background-color property of the lightbox overlay mask. It accepts HTML color codes (for example,
red), hex color codes (for example,
#ff0000), or RGB values (for example,
rgb(255, 0, 0)). The default color is
This input controls the
opacity property of the lightbox overlay mask. It accepts any value between
1.00. The defaults value is
Closeable via Overlay
This input determines whether the lightbox closes when the site visitor clicks the lightbox overlay mask.
If you select YES, then the lightbox closes when the visitor clicks the overlay mask. If you select NO, then the lightbox doesn't close if the visitor clicks the overlay mask.
Days Until Expiration
Only use this input if you selected Once every 'X' days from Display Frequency. This option sets the number of days until the lightbox expires and accepts any numeric value.
This input sets the delay timer in seconds that Monetate waits until launching the lightbox. It accepts any numeric value.
This setting controls whether the lightbox content fades in. If you select YES, then the lightbox fades in when the visitor opens or closes it. If you select NO, then the lightbox appears on the page and closes without any animation.