Popups & modals
Custom modals and popups — the style overrides, the class hooks, and the per-modal scoped Custom CSS escape hatch.
A custom modal (a centered dialog with a dimming overlay) or popup (a corner card
that slides in without blocking the page) is built from the site's Popups
settings — copy, image, a CTA, and an optional lead form. Triggers mirror the
runtime: an on-page link to #modal_<id>, exit-intent, or a time delay. Blank
colors and radius inherit the live site theme, so a modal wears your site's
own background, text, and button treatment out of the box.
Style overrides
Each modal carries a style group. A curated variant sets the chrome
character; the rest are per-field overrides (blank = inherit the theme token).
| Override | Values |
|---|---|
type | modal (centered + overlay) / popup (corner card) |
variant | minimal / glass / elevated / editorial |
overlayColor | color — the dimming scrim (modal only) |
surfaceColor | color — card background (blank → --color-background) |
textColor | color — body text (blank → --color-text) |
accentColor | color — CTA button + accents (blank → --color-accent / site button) |
closeColor | color — the × glyph |
radius | px — card corner radius |
width | sm (400px) / md (500px) / lg (620px) |
position | center / bottom |
The class hooks
| Hook | Element |
|---|---|
.tortus-site-modal | the container (also carries the per-modal scope id) |
.tsm-surface | the modal card |
.tsm-btn | the CTA / submit button |
Custom CSS is scoped per-modal to #tortus-modal-css-<id> (the container id),
so a rule can only touch that one modal — and the brand tokens are present on the
container, so scoped CSS can reference --color-* / --font-*.
Restyling with the hooks
In a modal's Custom CSS field you target .tsm-surface / .tsm-btn directly —
this is what you paste; it's scoped to the modal's container for you.
Scoped to `#tortus-modal-css-<id>` per modal — one modal's Custom CSS never touches another. Reference the site's `--color-*` / `--font-*` tokens to stay on-brand.
Reach for the variant + color overrides first; drop to the class hooks only
when you need more. This is the same scoped-Custom-CSS escape hatch that
page-builder blocks expose via Convert to custom.
Full param table: Designer Handbook.