Popups

A popup: a dialog that opens on a trigger you choose, such as a delay, a scroll depth or a click.

You will find it in the WordPress admin menu as Popups, stored as canvas_popup.

What You Get

These decide where items appear and what you can do with them:

A panel on the Popup edit screen, holding these settings:

Demo

Load this demo's stylesheet, fonts and scripts on this content, and add its body class. Leave as None for content that is not part of a demo.
Demo Role

Marks this content as the demo's cart, checkout or other named piece, so the demo can link to it without storing an ID. Free-form; used with the Demo above.

Shown when Demo is set

A panel on the Popup edit screen, holding these settings:

Enable this popup
How it opens

Automatically opens the popup on its own. From a link keeps it closed until a link pointing at its anchor is clicked.
Link anchor

The anchor a link opens this popup with, without the #. Give the link this address and the attribute data-lightbox="inline". Leave empty to use the popup's own id, which changes when the popup is imported.
Open delay (ms)

Delay before the popup opens, in milliseconds.
Open after scrolling (px)

Hold the popup back until the visitor has scrolled this far down the page. 0 = open on the delay alone.
Auto-close after (ms)

Automatically close after this many milliseconds. 0 = never.
Open animation
Close animation
Close on backdrop click
Show close button
Show only once (cookie)

Remember when this popup has been shown so it does not reappear.
Cookie expiry (days)

How long to remember, in days.
Cookie path
Show on
Page / Post IDs

Comma-separated IDs. Used when "Show on" is set to "Specific pages".
Max width

These design tokens reuse Canvas / Bootstrap defaults. Leave blank to use the theme default.
Background
Border radius
Padding
Overlay color
Overlay opacity

A value between 0 and 1. Blank uses the theme default.

You need these only when reading or writing a Popup in code:

Was this page helpful?