Modals

Easy to use modals for HL sites and communities

The Modals plugin transforms an HTML content widget into a popup modal that appears on page load. Use it for announcements, promotions, important notices, or anything that needs to grab attention when a visitor lands on the page. Built-in cookie management means visitors won't see the same modal every time — they can dismiss it for a year, or ask to be reminded later.

Take Action Now

HL Plugins / Modals

Modals

By For Higher Logic Sites and Communities

Turn any content block into a timed popup modal.

The Modals plugin transforms an HTML content widget into a popup modal that appears on page load. Use it for announcements, promotions, important notices, or anything that needs to grab attention when a visitor lands on the page. Built-in cookie management means visitors won't see the same modal every time — they can dismiss it for a year, or ask to be reminded later.

See it in action

A modal is loaded on this page.

If you don't see it, you may have already dismissed it.

  1. Click here to reset modal cookies
  2. Reload the page

How to set up a modal

  1. Add an HTML widget to any page where you want the modal to appear.
  2. Add the content of your modal — headline, body text, any links or images. Start with an <h2> — that becomes the modal's title.
  3. Open the widget's settings and add these CSS Wrapper Class Names:
    • theme-logic-modal — required, activates the plugin
    • modal-name-[yourName] — required, unique identifier (e.g. modal-name-welcome)
    • modal-delay-[milliseconds] — optional, delays the modal from appearing (e.g. modal-delay-3000 for 3 seconds)
    • modal-remind-later — optional, adds a "Remind me later" button
  4. Save and publish. The modal will appear the next time someone loads the page.

Example — all classes together:

theme-logic-modal modal-name-welcome modal-delay-3000 modal-remind-later

This creates a modal named "welcome" that appears after a 3-second delay with both "Dismiss" and "Remind me later" buttons.

Options

Controlling when the modal appears

By default, the modal appears immediately when the page loads. To delay it, add modal-delay-[milliseconds] — replace [milliseconds] with the number of milliseconds to wait.

Common values:

  • modal-delay-1000 — 1 second
  • modal-delay-3000 — 3 seconds
  • modal-delay-5000 — 5 seconds

A short delay (2–4 seconds) gives the page time to render and the visitor time to orient before the modal appears. Modals that appear instantly can feel jarring.

Add a "Remind me later" button

Add modal-remind-later to give visitors a "Remind me later" option alongside the "Dismiss" button. Clicking it will hide the modal for 24 hours.

Without this class, the modal shows only a "Close" button that hides the modal without setting any cookie — it will appear again on the visitor's next page load.

Unique names matter

Every modal on your site needs a unique modal-name-[name]. The name is what ties the dismissal cookie to that specific modal — so visitors who dismiss one modal will still see others. Use only letters and numbers — no spaces, dashes, or underscores.

Good examples:
  • modal-name-welcome
  • modal-name-annualconference2026
  • modal-name-membershiprenewal
Avoid:
  • Generic names like modal-name-popup or modal-name-test
  • Names with dashes or underscores like modal-name-spring-sale
  • Names you plan to reuse for different modals — once a visitor dismisses it, they won't see any future modal with the same name

Testing your modal

Once you click "Dismiss" or "Remind me later," the modal won't show again right away — which makes testing tricky. To reset all modal cookies on your site, add a link anywhere on the page with this exact href:

<a href="#clear-all-my-modal-cookies">Clear my modal cookies</a>

Click that link and all modal cookies will be cleared from your browser. Reload the page and your modal will appear again.

This clears cookies for every modal on your site, not just one. It's a testing convenience, not a per-modal reset.

Good to know

One modal per page. If you add multiple modal widgets to the same page, only the first one will display.

Dismissal is persistent. Once a visitor clicks "Dismiss," they won't see that modal again for a year. "Remind me later" hides it for 24 hours. The "Close" button (when "Remind me later" isn't enabled) and clicking outside the modal both close it without setting any cookie.

Changing a modal's content doesn't reset dismissals. If you update the text of an existing modal, visitors who already dismissed it won't see the new version. Give updated modals a new unique name if you want to re-engage dismissers.

Headings matter. The plugin pulls the modal's title from the first <h2> inside the widget. Make sure your content starts with a heading.

The original widget is hidden. When the plugin activates, the HTML widget itself is hidden from the page — visitors only ever see the modal version of its content. You can place the widget anywhere on the page without affecting the page layout.

Ready to use this plugin?

If you haven't installed the plugin library on your HL site yet, you can request access and set it up in under five minutes. It's a quick one-time setup.

Get started

Feedback welcome

Found a bug? Have a suggestion to make this plugin better? We'd love to hear it.

justin@themelogic.com

Need something custom?

Need this plugin to behave differently, or want a custom plugin built specifically for your site? We offer custom plugin development.

justin@themelogic.com

HL Plugins are provided under the Theme Logic Proprietary Use License. Use of these files constitutes acceptance of the license terms. View license →