## Modal windows

URL: https://hub.jkdevstudio.com/knowledge-base/integration/modals-integration
Updated: 2026-09-06
Summary: Create modal windows with their own triggers and frequency rules, choose what goes inside them, and test before launch.

This integration lets you show any content in a modal window over the site, and decide what opens it. It is self contained, with no third party plugin required.

The idea everything else follows from: a modal here is its own object with its own settings, not a property of a page. You create the window once and it lives on the site by its own display rules.

So the modal list shows every window on the site, each configured separately. It is not a block you have to place on every page.

## What goes inside

Three content sources, chosen inside the window itself: the ordinary editor, a saved [Elementor](https://wordpress.org/plugins/elementor/) template, or a block pattern.

When to use which: the editor for text and a simple form; an Elementor template when the window is composed visually alongside the rest of the site; a pattern when you want a ready made piece of the theme layout.

<div data-callout="info">

**The heading and subheading fields apply to the editor source only.**

An Elementor template and a block pattern bring their own heading inside them, so those two fields are not drawn at all when you pick either. It is the one thing on this screen that surprises people.

</div>

Typical contents: a signup form, an announcement, a warning, an image or a video.

## Triggers

The most useful part of the whole feature.

:::deflist

After a delay
: The simplest and most common. The window appears a set time after the page loads.

On scroll
: When the reader reaches a certain depth, or a specific place on the page. The second is right when the window should follow a particular block.

After a number of clicks, or a pause in activity
: For cases where engagement matters more than elapsed time.

On exit intent
: The classic retention trigger, and the easiest one to make annoying.

On a click of a button or link
: The window opens only when somebody asks for it. The most polite option, and worth treating as the default choice.

Manually
: Nothing opens it by itself; it is opened from code. Each window has its own permanent identifier for that.

:::

## Frequency and audience

Frequency is what separates a useful window from an irritating one. Show it once, show it no more often than a set interval, or show it every time.

The site remembers a visitor's choice, so "once" genuinely means once rather than once per session.

Devices: a window can be left to desktop only, mobile only, or shown everywhere. On a phone a modal covers most of the screen, so switching it off there is a reasonable decision rather than a loss.

<div data-callout="warning">

**One active window per page.**

Two windows opening on similar conditions will spoil the experience, reliably, and the second one usually lands on top of the first while a visitor is still reading it.

</div>

## Appearance

Size and custom width, corner rounding, inner padding, and whether the window has a frame or none.

The backdrop behind it: color, opacity, and background blur.

The close button: whether it shows and where it sits. One warning here: if you remove the close button, the visitor must have another way out, or the page becomes a trap.

Page behavior underneath: whether scrolling is locked, and whether scrolling closes the window.

## Testing before launch

Preview mode opens every window on every page load, for administrators only, and ignores the frequency limits.

Switch it off before the site goes live. Otherwise you see the window every time and conclude the frequency setting is broken.

The real check: open the site in a private browser window and walk through the scenario the way a visitor will.

## Integrations are part of the theme

<div data-callout="note">

**This integration is licensed with the theme, not on its own.**

Integrations are premium functionality for customers running a Pro license of one of our themes. They are written against our themes and expect them, and we cannot support or take responsibility for what one does inside somebody else's theme. See [how theme integrations work](/knowledge-base/integration/how-theme-integrations-work).

</div>

## Common questions

<details><summary>Can I show a different modal on different pages?</summary>

Yes, since each window carries its own display rules, so the normal pattern is one window per situation rather than one window with conditions piled onto it.

</details>

<details><summary>How do I put a signup form in a modal?</summary>

Use the editor as the content source and add the signup block inside it, which is also how the [Mailchimp form](/knowledge-base/integration/mailchimp-integration) ends up in one.

</details>

<details><summary>My modal shows every time despite the frequency setting</summary>

Preview mode is still on, or you are testing while signed in as an administrator, and both ignore frequency on purpose, so check the behaviour in a private window before changing any setting.

</details>

<details><summary>Can I open a modal from a menu item?</summary>

Yes, with the click trigger pointed at that link, which is the politest way to use a modal at all.

</details>

<details><summary>A modal never appears</summary>

Check whether the trigger condition can actually be met on that page, since a scroll depth trigger on a short page never fires and an exit intent trigger never fires on a phone, then confirm the window is enabled for the device you are testing on and that your own visit has not already spent its single showing.

</details>

## Still stuck

[Open a support ticket](https://hub.jkdevstudio.com/support) with the page, the trigger you chose and the frequency setting.