Modals

Trigger a modal / popup dialog from a button, link, or auto-open on page load. It is shown in the block inserter as Canvas Modal and registered as canvas-core/modal.

Select the block on a page and its own settings open in the sidebar, in the panels below:

Settings

Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:

Content

• ModeDefaultTrigger (button/link that opens a modal)

  Trigger opens a modal by ID. Container holds the modal content (built from inner blocks) and is opened by a matching trigger.

  ChoicesTrigger (button/link that opens a modal)Content Container (the modal popup itself)

• Dialog EngineDefaultCanvas Popup (lightbox overlay)

  Which dialog the block builds. Bootstrap Dialog is the framework standard one and unlocks the size, scrolling and centring settings below. Canvas Popup is the lighter overlay the shipped designs use.

  ChoicesCanvas Popup (lightbox overlay)Bootstrap Dialog (.modal)Shown when Mode is "Content Container (the modal popup itself)"

• Dialog SizeDefaultEmpty

  How wide the dialog opens. Fullscreen fills the whole window, which suits a long form on a phone.

  ChoicesDefault (empty)SmallLargeExtra LargeFullscreenShown when Dialog Engine is "Bootstrap Dialog (.modal)"

• Scrollable BodyDefaultOff

  Keeps the heading and the footer buttons in place and scrolls only the middle, so a long dialog never pushes its buttons off screen.

  Shown when Dialog Engine is "Bootstrap Dialog (.modal)"

• Vertically CenteredDefaultOff

  Sits the dialog in the middle of the screen instead of near the top.

  Shown when Dialog Engine is "Bootstrap Dialog (.modal)"

• Show HeaderDefaultOn

  Draws the top bar with the dialog title and its close control. Turn it off for a dialog whose content supplies its own.

  Shown when Dialog Engine is "Bootstrap Dialog (.modal)"

• Dialog TitleDefaultEmpty

  Heading in that top bar, which tells a visitor what has opened.

  Shown when Dialog Engine is "Bootstrap Dialog (.modal)"

• Title TagDefaultH4

  Heading level that title takes. Choose span to keep the dialog out of the page outline.

  ChoicesH2H3H4H5H6spanShown when Dialog Engine is "Bootstrap Dialog (.modal)"

• Footer ButtonsDefaultEmpty

  The buttons along the bottom of the dialog, in the order listed here. Leave it empty for a dialog with no footer at all.

  Shown when Dialog Engine is "Bootstrap Dialog (.modal)"

  Each row of Footer Buttons takes:

  • LabelDefaultEmpty

    Wording on this button.

  • ClassesDefaultbtn btn-secondary

    Classes that style this button, which is how a confirm button is set apart from a cancel one.

  • Closes the DialogDefaultOff

    Makes this button shut the dialog when it is pressed, which is what a Cancel or Close button needs.

• Trigger TextDefaultOpen Modal

  Wording on the control that opens the dialog.

  Shown when Mode is "Trigger (button/link that opens a modal)"

• Trigger StyleDefaultButton

  How that control is drawn: a button, a plain text link, or an icon on its own.

  ChoicesButtonLinkIcon ButtonShown when Mode is "Trigger (button/link that opens a modal)"

• Content Max Width (px)DefaultEmpty

  Optional max-width for the modal content box, in pixels.

  Shown when Mode is "Content Container (the modal popup itself)"

• Content Box ClassesDefaultblock mx-auto

  Classes on the box inside the modal. Add "dark" for a light-on-dark card.

  Shown when Dialog Engine is "Canvas Popup (lightbox overlay)"

• Inner Padding Wrapper ClassesDefaultp-5

  Classes on the padding box wrapped around the inner blocks. Leave empty to place the inner blocks straight inside the content box: a design whose modal builds its own padded rows needs that.

  Shown when Dialog Engine is "Canvas Popup (lightbox overlay)"

Style

• Content Box BackgroundDefault#FFF

  Background colour of the content box. Ignored when a background image is set.

  Shown when Dialog Engine is "Canvas Popup (lightbox overlay)"

• Content Box Background ImageDefault0

  Picture drawn behind the dialog content, for a promotion or newsletter popup with artwork of its own.

  Shown when Dialog Engine is "Canvas Popup (lightbox overlay)"

• Background Image URL (fallback)DefaultEmpty

  Used when no attachment is selected above (e.g. shipped pattern content).

  Shown when Dialog Engine is "Canvas Popup (lightbox overlay)"

• Background SizeDefaultCover

  How that picture fills the box. Cover crops it to fill; Contain fits the whole picture in and may leave space around it.

  ChoicesCoverContainAutoShown when Dialog Engine is "Canvas Popup (lightbox overlay)"

• Content Box Height (px)Default0

  Locks the content box to a fixed height on large screens, used by image-backed cards so the artwork keeps its shape. 0 lets the content decide.

  Shown when Dialog Engine is "Canvas Popup (lightbox overlay)"

Settings

• Modal Content Element IDDefaultEmpty

  Without the #. Trigger mode: the ID of the content container to open. Container mode: the ID assigned to this modal so triggers can open it.

• Auto Open on Page LoadDefaultOff

  Opens the dialog by itself when the page loads, without a visitor pressing anything.

• Auto Open Delay (ms)Default2000

  0 leaves the delay unset, so the theme's own default applies.

  Shown when Auto Open on Page Load is on

• Show Only Once per VisitorDefaultOff

  Stores a cookie when the visitor dismisses the modal with a "close" control carrying the modal-cookies-close class, so it does not open again on later visits.

  Shown when Auto Open on Page Load is on

• Remember For (days)Default0

  0 keeps the cookie for the browsing session only.

  Shown when Show Only Once per Visitor is on

• Close on Background ClickDefaultOn

  Lets a visitor dismiss the dialog by clicking the dimmed page behind it. Turn it off when the dialog asks for a decision.

• Cookie Name (suppress repeat)DefaultEmpty

  Set a cookie name to prevent the modal opening again after the user dismisses it.

Related

Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.

Other blocks in Interactive: Accordions, AJAX Buttons, Carousels, Cookie Consent, Countdowns, Flip Cards.