Website elementsOffers & conversion
Modal box
A website popup, built into your site with no plugin and no library. A native <dialog> over the page, opened by any element with data-modal-open, by a #<id> link, or (opt-in) after a delay, a scroll depth or exit intent. Focus trapped, Escape and backdrop close it, focus returns to the opener, the page does not scroll underneath. Automatic opens wait for 3 s of visible time and for the consent bar, happen once per page view across all modals, and are remembered per session or per visitor.
On click, a form
Any element with data-modal-open opens it: a button, a link, an image. So does a link ending #demo-modal-ask, as from an email.
After 20 seconds or half the page, once a session
Opens by itself when either comes first, but never in the first 3 seconds, never while a consent bar is waiting and never again this session once closed.
Exit intent
Move the pointer out through the top of the window, towards the tabs. Mouse and trackpad only: on a phone or tablet exit intent never fires, because there is no pointer to leave.
Full screen, an image
You'll need to give us
- The offer or message it showsNeeded to startA heading, a few lines, and the button or form it leads to.
- When it should openWhen a visitor presses a button, after some time on the page, part-way down it, or as they go to leave.
Send these with your request and we can start straight away. Everything else is ours to do.
A box that opens when it is asked for — a click, a scroll, a hand leaving for the tab bar — and stays gone once it's been closed.
Also called
PowerPack Modal BoxUABB Modal PopupElementor Popuppopuplightboxexit-intent popupOptinMonster
What it replaces
- PowerPack / UABB / Elementor popup modules
- OptinMonster and popup plugins
- Magnific Popup / Fancybox for content
Good for
Something the visitor asked for: a form behind a “Get a quote” button, a video or a large image on request, a link in an email that opens the offer (#<id>). Or one offer after real engagement: half the page read, or a mouse heading for the tab bar. A popup is a tool with a cost, so use it where the content is worth the interruption.
Not for
Opening on arrival. A popup that covers the content the moment the page loads is what put popups out of favour: people leave, and Google’s guidance on intrusive interstitials says a mobile page whose content is blocked on arrival can rank lower. That is why automatic opens here wait for 3 s of visible time at the least. Also not for every page, not for more than one automatic popup per page (the element opens only the first anyway), and not for content people need in order to use the page, which belongs on the page. Exit intent works with a mouse or trackpad only: on a phone or tablet it never fires, so a mobile audience needs a scroll or delay trigger or none.
Accessibility
Written so the page works for every visitor, whether they browse with a mouse, a keyboard or a screen reader, and whether or not they have asked for less motion.
- A native modal <dialog> opened with showModal(): the rest of the page is inert, Tab stays inside, Escape closes it. Named by its title through aria-labelledby, also when the title is hidden visually.
- The close button is a real 44px <button> named by closeLabel, first in the dialog, so it has focus on open unless the content has an autofocus field. A backdrop click closes too; a text selection dragged out of the box does not.
- Focus returns to the element that opened it, or after an automatic open to whatever had focus. Triggers get aria-haspopup="dialog"; a trigger that is not a button or link (an <img>) gets role="button" and tabindex="0" and opens on Enter or Space.
- The page underneath does not scroll while it is open, and the scrollbar’s width is kept so nothing shifts.
- prefers-reduced-motion: no fade or rise; it appears at once. Nothing else moves.
- Without JavaScript the dialog stays closed and nothing opens by itself. A link trigger still goes to its href (point it at a page with the same content); a button trigger does nothing.
Where it's live
- superherotech.ai: /elements/modal/ (demo)
How to ask for it
“The modal on our home page, with …”
Name it, say which page and which part of the page it goes on, and say what goes in it: your photos, your words, your colors. That is a complete request. We build it, you approve it, and it goes live. If you know it by another name, from WordPress or from another site, that works too.
More elements you can ask for: Before / After, Particle field, Mega menu, Video background, Parallax band, Scroll reveal, Business hours, News ticker, Flip box, Instagram feed, Accordion / FAQ, Card slider, Tabs, Info list, Video player, Testimonial carousel, Icon library, Animated text, Cookie consent, Animated background, Announcement bar, Image hotspots, Info circle, Slide box, Countdown, Content toggle, Off-canvas panel, Video gallery, Map and directions, Link effects, Tabcordion, Tooltip, Responsive table, Notice, Toast, Loading, Menu button, Radio group, Stepper, Tags, Scrollbox, Sticker. Or see all of them working.
More in Offers & conversion
See them all working- Announcement bar
One line across the top for the thing that matters this week — with a date it stops itself, and a dismiss that stays dismissed.
- Countdown
Show exactly how long is left — to the end of a sale, the start of an event or today’s order cut-off — in your time zone, not the visitor’s guess.
- Content toggle
Let visitors flip between two versions of the same thing — monthly or annual prices, homes or businesses — without leaving the page.
- Sticker
Mark the sale, the new arrival or the last few in stock right on the photo, where shoppers look first.
Want the modal box on your site?
Tell us about the business. We build the site with it, launch it, and change it whenever you ask.