---
title: Popup & Modal Pro — Popup Module for HubSpot
description: A popup module for HubSpot CMS. Modals, split offers, full-screen launches, corner slide-ins, bars, drawers and video lightboxes, opened by a click, a delay, a scroll, an exit, a quiet minute or a link. Every colour, size and word is a field.
---

[![StudioNope Themes](https://www.nopethemes.com/hubfs/studio-nope-themes-logo.png)](https://www.nopethemes.com?hsLang=en) [Get the module →](https://ecosystem.hubspot.com/marketplace/website)

HubSpot CMS module

# Popup & Modal Pro

Modals, split offers, full-screen launches, corner slide-ins, bars, drawers and video lightboxes. Open them with a click, a delay, a scroll, an exit, a quiet minute or a link from your email, and choose how often each one shows and to whom. Every colour, size and word is a field.

[Get the module](https://ecosystem.hubspot.com/marketplace/website) [See it live ↓](https://www.nopethemes.com/popup-modal-pro#demo-1)

Demo 1

## The bar at the top of this page

A top bar in push mode. Three seconds after the page loads it slides in above the header and moves the page down once, so nothing is covered. It has no overlay and does not take focus, so you can keep reading with it open. Close it and it stays closed until the next page view.

[Show the bar again](https://www.nopethemes.com/popup-modal-pro#kelham-bar)

Kelham Island

Our second building opens on 3 November. Fixed desks from £180 a month.

[Book a tour](https://www.nopethemes.com/popup-modal-pro#demo-1)

Opens by itself 3 seconds after load.

---

Demo 2

## A newsletter sign-up when you go to leave

A centred modal with an image on top, an email field and a No thanks link. On a computer it opens when the pointer leaves through the top of the window. On a phone it opens on a fast scroll back up. It shows once per visit and three times in total, and never again after you subscribe. On a phone it becomes a sheet from the bottom of the screen.

Open the newsletter popup

![](https://www.nopethemes.com/hs-fs/hubfs/popup-modal-pro-demo/halden-newsletter.png?width=1920&height=800&name=halden-newsletter.png)

Every Sunday at 7am

## Get the Sunday Edit

One long read from the week, three short ones and the events worth leaving the house for. Free, and every issue has a one-click unsubscribe.

You're on the list

The next Sunday Edit arrives this weekend at 7am.

Sundays only. We never share your address.

No thanks

Also opens when you move the pointer out of the top of the window, once per visit.

---

Demo 3

## A linen offer with a code and a deadline

A split popup, image on the left. The code copies with one click and the countdown runs to the end of the offer. It opens when a new visitor has read 30% of the page, or straight away when the page is opened with `?offer=autumn` in the address, the way a link in an email or an ad would open it. It shows once every seven days.

[Open the offer](https://www.nopethemes.com/popup-modal-pro#linen-offer) [Open this page with ?offer=autumn](https://www.nopethemes.com/?offer=autumn&hsLang=en#demo-3)

![The stonewashed linen set in oat on the Hollis & Pine shop](https://www.nopethemes.com/hs-fs/hubfs/popup-modal-pro-demo/hollis-autumn.png?width=1480&height=1920&name=hollis-autumn.png)

Autumn restock

## 15% off linen sets until 30 November

Stonewashed sets in oat, clay, sand and sage are back in every size. Use the code at checkout.

Offer ends in

65days 11hours 59min 55sec

This offer ended on 30 November.

Your code`LINEN15`

Copy

[Shop linen sets](https://www.nopethemes.com/popup-modal-pro#demo-3)

No thanks

Also opens at 30% scroll, for new visitors, once a week.

---

Demo 4

## A recorded webinar that plays over the page

A video lightbox. The poster below is an ordinary image on the page. The popup listens for clicks on anything matching `.demo-webinar-card`, so the poster opens it, and so does [the link in this sentence](https://www.nopethemes.com/popup-modal-pro#webinar). The player grows out of whatever you clicked and stops the sound when it closes.

![](https://www.nopethemes.com/hs-fs/hubfs/popup-modal-pro-demo/planyard-webinar-poster.png?width=2560&height=1440&name=planyard-webinar-poster.png) 22:08

![](https://www.nopethemes.com/hs-fs/hubfs/popup-modal-pro-demo/planyard-webinar-poster.png?width=1920&name=planyard-webinar-poster.png)

## Plan a quarter in twenty minutes

Recorded webinar · 22 min · Maya Reyes

escto close

[Book a live session](https://www.nopethemes.com/popup-modal-pro#demo-5)

Click only. This popup never opens by itself.

---

Demo 5

## A demo request from a button

The popup draws its own button. It sits wherever you drop the module, in the button style you choose, and opens a split popup with the image on the right and a form. This one uses the default colours: nothing in the Style tab has been changed. Once someone sends the form, the popup stops opening for them by itself. On a phone it opens as a sheet.

Book a demo

![The Brightwork dispatch board with a day of jobs](https://www.nopethemes.com/hs-fs/hubfs/popup-modal-pro-demo/brightwork-schedule.png?width=1440&height=1800&name=brightwork-schedule.png)

30-minute demo

## See Brightwork on your own jobs

Send us a normal week and we will show you the board filled in with it. Tuesday to Thursday, 9am to 5pm Eastern.

Thanks. We'll email you today.

Reply to that email with a week of jobs, in any format.

We use your details to arrange the demo and nothing else.

No automatic trigger. The button is the module's own.

---

Demo 6

## What's new, in a drawer

A side drawer from the right, opened by an outline button with a count on it. The header and footer stay put while the body scrolls, so a long changelog still reads well. The entries are one rich text field: headings, paragraphs, images and a tag before each heading.

What's new3

## What's new

September 2026

***New*** 22 September

### Rollouts pause themselves

Set an error-rate limit on any gradual rollout. If the flag goes over it, the rollout holds at its current step and the owner gets an email.

![A rollout at 25% with an error-rate limit of 0.5%](https://www.nopethemes.com/hs-fs/hubfs/popup-modal-pro-demo/flagpost-rollout.png?width=1520&height=800&name=flagpost-rollout.png)

---

**Improved** 15 September

### Compare two environments

Pick staging and production and see every flag that differs. Copy the changes across in one step.

![Staging and production compared, two flags differ](https://www.nopethemes.com/hs-fs/hubfs/popup-modal-pro-demo/flagpost-compare.png?width=1520&height=800&name=flagpost-compare.png)

---

**Fixed** 9 September

### Audit log exports keep your time zone

CSV exports used UTC whatever your settings said. They now use the workspace time zone and say which one in the header row.

Got it

[Full changelog](https://www.nopethemes.com/popup-modal-pro#demo-6)

No automatic trigger.

---

Demo 7

## A question box that arrives with its section

A slide-in from the bottom-right corner. It opens once this section scrolls into view, and the page stays usable around it: no overlay, no locked scroll, and focus stays where you are. On a phone it docks along the bottom edge. It stops opening by itself once a question has been sent.

[Show the slide-in](https://www.nopethemes.com/popup-modal-pro#ask-engineer)

RNTSJBEngineers online, UK hours

## Planning a Kestrel install?

Ask the people who fit them. Tell us about the building and we reply by email the same working day.

Question sent

An engineer will reply to your email today.

Opens by itself when this section comes into view, once per visit.

---

Demo 8

## A launch that takes the whole screen

A full-screen takeover for a launch day. It opens from a link to `#orla-two`, which works from anywhere on the page, from another page, or from an email. The text comes in line by line, and the close button names itself and the Esc key.

[Open the launch](https://www.nopethemes.com/popup-modal-pro#orla-two)

orla

Closeesc

Orla 2.0 is out today

## One calendar for the whole house

Everyone keeps their own calendar. Orla lays them over each other, so the school trip, the away match and the dentist sit in one week, and the person who is free gets the reminder.

[Get the app](https://www.nopethemes.com/popup-modal-pro#demo-8)[Open in the browser](https://www.nopethemes.com/popup-modal-pro#demo-8)

Free for up to five peopleiPhone, Android and web

![Orla week view on a laptop and the Today list on a phone](https://www.nopethemes.com/hs-fs/hubfs/popup-modal-pro-demo/orla-two-launch.png?width=2560&height=1920&name=orla-two-launch.png)

Click or link only. A full-screen popup that opens by itself is hard to forgive.

---

Demo 9

## A pricing sheet for someone who has stopped scrolling

A bottom bar with an email field built in. It opens after 20 seconds without a scroll, click or key press, or after 90 seconds on the page, whichever comes first. It opens by itself on computers only. A phone gets the button, because a bar with a keyboard over it leaves little room to read. It shows at most twice.

[Show the bottom bar](https://www.nopethemes.com/popup-modal-pro#pricing-sheet)

Still comparing plans? Get every limit on one page, as a PDF.

On its way

Check your inbox in a minute.

Opens by itself after 20 seconds idle, on a computer.

## What it is

One module that is one popup. Drop it anywhere in a drag-and-drop area and it shows where you put it only as an optional button; the popup itself opens over the page when one of its triggers fires. Put several on a page, or in a global group on every page, and they share one queue, so a visitor only ever sees one at a time.

## Layouts

| Layout | What it is for |
| --- | --- |
| Centred modal | An offer, a sign-up or a notice in the middle of the screen, with an optional image on top |
| Split | Image on one side, content on the other. Left or right |
| Full-screen takeover | A launch or an announcement that owns the screen, image beside, below or behind the text |
| Corner slide-in | A small panel in any corner. The page stays usable around it |
| Top bar | A line of news across the top. It can sit over the page or push it down |
| Bottom bar | The same along the bottom edge, with room for a code, a countdown, a button or one form field |
| Side drawer | A tall panel from the left or right, with a header and footer that stay put |
| Video lightbox | YouTube, Vimeo, HubSpot video or an MP4 file over a dark overlay |

On phones the modal, the split and the drawer can become a sheet from the bottom of the screen that the visitor can drag down to close, stay as they are, or fill the screen. The breakpoint is a field.

## Triggers

Switch on as many as you like. The first one to fire opens the popup, and the rest wait for the next page view.

- **Click.** Any link on the page to `#your-popup-id`, any element matching a CSS selector you enter (such as `.open-offer`), and the module's own button. A link from another page to `/page#your-popup-id` opens it on arrival.
- **Delay.** Seconds after the page loads.
- **Time spent reading.** Seconds counted only while the tab is in view and the visitor has moved, scrolled or typed in the last half minute.
- **Scroll.** A percentage of the page, or the moment an element you name reaches the middle of the screen.
- **Exit intent.** On a computer, the pointer leaving through the top of the window. On a phone, a fast scroll back up after reading a quarter of the page. It waits a few seconds after load so it never fires on someone who has only just arrived.
- **Inactivity.** Seconds without a scroll, click, tap or key press.
- **Web address.** `?popup=your-popup-id`, or a parameter of your own such as `?offer=spring`, so an email or an ad can open it.

## How often, and to whom

These rules apply to the automatic triggers. **A click or a link always opens the popup**, whatever the limits say, because the visitor asked for it.

- Show automatically on every page view, once per visit, once every few days, or once ever.
- Stop after a number of showings, and stop after a conversion: a form sent, a button marked as a conversion, or the code copied.
- Only from the second or third page view of a visit, or not before a number of seconds into the visit.
- Desktop and tablet only, or phones only.
- First-time visitors only, or returning visitors only.
- Wait until HubSpot's cookie banner has been answered.

Counts are kept in the visitor's browser under the Popup ID, so the same popup placed on many pages shares its counts. Give every popup on your site its own ID. No cookies are set.

## Content

From top to bottom: an icon, an image or a video; an eyebrow with an optional icon; the heading; rich text; a countdown; a coupon code with a Copy button; a HubSpot form; up to two buttons; small print; a “Don't show this again” checkbox; and a No thanks link. Each part shows only when it has something in it. A button can go to a link, close the popup or copy the code. The slide-in can show up to three sets of initials and a status line above the heading.

The countdown runs to a date and time, or to a number of hours after each visitor first sees the popup. When it reaches zero it can hide itself, show an “offer ended” line, or stop the popup opening by itself.

## Forms

Pick any HubSpot form. Forms from the legacy form editor render inside the popup and take its styling: labels, fields, errors, the submit button and the consent text all follow the Form group on the Style tab. Forms from the new form editor render in HubSpot's own frame, which a page's styles cannot reach, so they keep the look set in the form editor.

After a submit the popup can stay open or close after a few seconds. The thank-you can be the form's own message or redirect, or a heading and text of your own with a tick. A coupon can stay hidden until the form is sent.

## Closing and accessibility

A close button, the Esc key, a click on the overlay, a No thanks link, a “Don't show this again” checkbox, or closing by itself after some seconds, paused while the pointer is over it or focus is inside it. Esc always works.

Modal layouts use the browser's own dialog: the page behind is out of reach for the keyboard and screen readers, Tab stays inside, the page does not scroll, and focus returns to whatever opened the popup. Slide-ins and bars leave the page usable and do not take focus when they open by themselves; screen readers hear the heading once. Visitors who ask their device for reduced motion get a quick fade and no autoplaying video.

## One at a time

Only one popup is ever on screen. When a second one's trigger fires while another is open, it waits in a queue ordered by each popup's Priority and opens shortly after the first one closes, if its rules still allow it. A click on another popup's link closes the open one and opens the new one straight away. On this page the top bar counts too: close it and the others can arrive.

## In the page editor

The popup renders in place, open, inside a dashed frame, so you can click into every field. A line above it names the layout, the triggers and the frequency. Nothing opens by itself in the editor, nothing covers it and the page never stops scrolling. Notes appear there, and only there, when something needs attention: nothing to show, a video that is missing, a button without a link, a click selector that is not valid, or a Popup ID used twice on the page.

## Tracking

With the dataLayer switch on, the module pushes an event when a popup shows, converts and closes, for Google Tag Manager to pick up. The event names are fields.

```
window.dataLayer.push({
  event: 'popup_show',        // popup_convert, popup_close
  popup_id: 'linen-offer',
  popup_layout: 'split',
  popup_trigger: 'scroll',    // hash, selector, button, url, delay, engaged, exit, inactivity, api
  popup_method: 'esc',        // on close: button, esc, overlay, auto, dismiss_link, button_close, after_submit, replaced
  popup_conversion: 'form'    // on convert: form, button, coupon_copy
});
```

The same details go out as `popupmodalpro:show`, `popupmodalpro:convert` and `popupmodalpro:close` events on the document. A developer can open and close popups with `PopupModalPro.open('linen-offer')` and `PopupModalPro.close()`.

## Style

Every colour, size, radius, shadow and duration is on the Style tab, in this order: Typography, Colours, Overlay, Popup box, one group for the chosen layout, Phones, Close button, Buttons, Form, Coupon, Countdown, the No thanks link, the Trigger button, Motion and Layering. The accent colour, the fonts and the link colour follow your theme until you change them. With the grow setting on, a popup opened by a click grows out of the button or link that opened it and shrinks back into it.

## Troubleshooting

- **It does not open by itself.** It has probably used up its frequency: open the page in a private window, or clear the site's data. Check the device and visitor rules, and whether another popup is open and holding the queue.
- **My form looks different from the popup.** It was built in the new form editor, which HubSpot renders in its own frame. Use a form from the legacy editor for fields that match the popup.
- **The top bar covers my header.** Set the bar to push the page. A header that is fixed to the top of the screen stays under the bar either way; use the bottom bar or a slide-in there.
- **A #link does nothing.** The link must be exactly `#` plus the Popup ID, and “Open from links to #popup-id” must be on.

## Notes on this page

Every demo above is an instance of the module on the same container as its text. Foundry Row, Halden, Hollis & Pine, Planyard, Brightwork, Flagpost, Kestrel, Orla and Ledgerline are made up for the demo, and so are their pictures. The forms are real HubSpot forms on this site. The webinar video is a public tutorial on YouTube standing in for a recorded session. No CSS on this page touches the module.

The automatic triggers remember that you have seen them.

Reset the demo

 to see them fire again.

[![StudioNope Themes](https://www.nopethemes.com/hubfs/studio-nope-themes-logo.png)](https://www.nopethemes.com?hsLang=en) Popup & Modal Pro · Studio Nope [Get the module](https://ecosystem.hubspot.com/marketplace/website)