The All-in-One Lightbox on Click action displays HTML by filling the screen and dimming the rest of a web page with a semitransparent overlay. Monetate triggers this lightbox when a site visitor clicks a specific page element. The visitor can close the lightbox by clicking either the overlay mask or the close button incorporated into the image via a click zone. This action also appends included CSS styles in the <head> of the page.
Required Components
Relative Element Selector
The lightbox is triggered on the page when a site visitor clicks the specified element selector
HTML String
The HTML content you input into the HTML String 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 buttons classes should correspond to the optional close button class input or use the default lightboxClose class. You can also use a link with a #close href.
Lightbox Width
This input controls the width of the lightbox in pixels.
Lightbox Height
This input controls the height of the lightbox in pixels.
Optional Components
CSS Style
Anything you add to the CSS editor is appended to a stylesheet in the <head> portion of your site within a <style> block. These styles are available on this page for use with any page elements.
JavaScript
Anything you add in the JavaScript editor is appended to your site. Monetate loads it in a <script> tag and executes it when the action fires. Any variables or functions are available on this page for reference by other page elements or additional actions.
Pin Lightbox Position
This input allows you to control the position property of the lightbox content.
If you select No, then Monetate sets the lightbox position to relative and the lightbox content doesn't scroll with the page. If you select Yes, then Monetate sets the lightbox content position to fixed and the lightbox content scrolls with the page.
Top Position
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.
Left Position
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.
Overlay Color
This input controls the background-color property of the lightbox overlay mask. It accepts any 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 #000 (black).
Overlay Opacity
This input controls the opacity property of the lightbox overlay mask. It accepts any value between 0.00 and 1.00. The defaults value is 0.6.
Select All Elements
The Select multiple elements, if matched? toggle allows you to apply the action to the first occurrence of the element selector or all occurrences of the selector, if multiple exist.
Selecting NO applies the action to the first occurrence. Selecting YES applies the action to all occurrences.
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 may add an additional close button class with this input.
Closeable via Overlay
This input determines whether the lightbox closes when the user clicks the lightbox overlay mask.
If you select YES, then the lightbox closes when a visitor clicks the overlay anywhere. If you select No, then the lightbox doesn't close if the user clicks the overlay.