Modal windows

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

Everything else follows from one idea: a modal is its own entry with its own settings, not a property of a page. You create the window once, and it opens on the site by its own rules.

#What people use it for

• a newsletter signup that appears after a visitor has read for a while
• an announcement, a sale or a notice that has to be seen once
• a form, a video or an image that opens from a button instead of taking space on the page
• a message for visitors about to leave

#Creating a modal

#What goes inside

The Content source has up to four choices:

Rich editor

Text, links and shortcodes typed into the Body field. The simplest choice for a message or a short form.

Elementor template

A saved Elementor template. The choice only appears while Elementor is active.

Block pattern

A pattern registered by the theme or a plugin, or one you saved yourself in the block editor.

Post content

Whatever you build in the modal's own editor.

#Triggers

The Open when setting on the Trigger tab decides what opens the window.

After a delay

The window opens a set number of seconds after the page loads.

After scrolling

Scrolling down past a page depth in percent, or scrolling back up by a set distance in pixels, opens it.

When an element appears

The window opens when an element you name with a CSS selector scrolls into view. Useful when it should follow a particular block.

After page clicks

The window opens after the visitor has clicked anywhere on the page a set number of times.

After inactivity

The window opens after the visitor has stopped interacting for a set number of seconds.

On exit intent

The window opens when the mouse leaves the top of the browser window. It needs a mouse, so it never fires on a phone or tablet, and it is the easiest trigger to make annoying.

When an element is clicked

The window opens when a visitor clicks anything matching the CSS selector you enter. The politest trigger, because the visitor asked for it.

Manual only

Nothing opens the window on its own. A link or a script opens it, as described below.

#Opening a modal from a button or a link

Every modal has an ID on the page. You set it in the Trigger ID field; left empty, it is jkd-modal- followed by the modal's post ID.

A link whose address ends in # plus that ID opens the modal instead of jumping. So a menu item or a button with the address #newsletter opens the modal whose Trigger ID is newsletter, whatever its own trigger is set to.

For developers, the same window opens from JavaScript:

window.jkdModals.open('newsletter');

A link only works on pages where the modal is allowed to appear, because a modal outside its Visibility rules is not on the page at all.

#Frequency, devices and pages

Where a visitor's "already seen" is remembered is a site-wide setting, Visitor memory, covered below.

#Appearance and behavior

The Layout tab sets the Modal frame (Predefined, or Blank so your content fills the overlay without a panel), the Modal size from Small (360px) to X-Large (800px) or a Custom width (px), Corner radius (px) and Inner padding (px). It also holds the close button: Show close button and Close button position, inside the panel or on the overlay. Without a close button, visitors can still close the window by clicking the overlay or pressing Esc.

The Overlay tab covers the backdrop: Blur the background with its Blur strength (px), Overlay color (empty uses the theme's own) and Overlay opacity (%), plus Lock page scroll and Close on scroll.

#The global settings

Theme OptionsIntegrationsModals holds two settings for all modals:

#Testing before launch

Turn Developer preview on while you set up, so you do not have to wait for triggers or clear memory between attempts. Switch it off before the site goes live, or you will keep seeing every window 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. Modals never open inside the Customizer preview or the Elementor editor, so test on the live page.

#Do not combine it with another popup or modal plugin

Run one popup system on a site. A second popup, modal or lightbox plugin working on the same pages tends to collide with this one in predictable places: both react to the same click triggers and links, both lock and unlock page scrolling so one can leave the page frozen, and their windows compete for the top layer, so one opens hidden behind the other.

If you need a feature only another plugin has, use that plugin instead of this integration rather than both. Problems caused by a third party plugin, including conflicts between it and our integration, are outside what support covers, as the Support Policy sets out.

Third party plugins and where responsibility sitsA site running one of our themes has two kinds of plugin, and they are different things. An integration A first-party package we wrote, for our themes, usually to replace a general-purpose p...Best Practices

#Common questions

#Still stuck

Open a support ticket and say what you tried and where it stopped. Your product, your domain, a screenshot and the exact message you saw are usually enough to settle it in one reply.

Last updated 15 Sep 2026