Website Popups and Modals: A Guide to Getting Them Right

We have all landed on a website where, before you have read a single line, a huge window jumps out asking you to subscribe to a newsletter, and the close button is so small you need a magnifying glass to find it. Yet the very same component is what stops you from accidentally emptying your shopping cart, lets you leave your details without going to another page, and shows a product photo up close without losing your place in the catalogue.

A popup is a tool. It can bring in leads and prevent expensive mistakes, but it can just as easily drive visitors away, hurt your rankings on Google and make your site inaccessible to part of your audience. The difference lies in the planning: what you show, to whom, when, and how.

In this guide we cover:

• what a popup (modal window) is and what it is made of;
• the main types of popups and when each one fits;
• when a popup helps your business and when it hurts;
• how to time a popup so it does not get in the way;
• what Google, accessibility guidelines and European privacy rules mean for popups;
• how to build a popup in Webflow, WordPress, Wix and plain code.

What a website popup is and what it is made of

A modal window, more commonly called a popup, is a window that appears on top of the page content and blocks access to everything beneath it until the visitor responds: clicks a button, fills in a form or closes the window. The word "modal" describes exactly this behaviour. The interface switches into a different "mode", and while the window is open, the rest of the page is out of reach.

Most popups are built from the same handful of parts:

• A heading that explains in one sentence what the window wants: "Before you delete this", "Get the free guide", "Choose your size".
• Content: a short text, a form, an image or a video.
• Action buttons: the primary action (for example, "Send me the guide") and a secondary one ("Not now").
• A close button: a clear X in the corner, big enough to tap comfortably with a finger.
• A dimmed background (overlay): a dark or blurred layer that separates the window from the page and signals to the visitor that the page is "paused".

When one of these parts is missing or carelessly designed, visitors feel trapped. A window without an obvious close button, or one that only closes when you click a tiny line of grey text, is perceived as manipulation, and rightly so. We wrote about these tricks in detail in our guide to dark patterns in UX design.

Types of popups: modal and non-modal

Not every window that appears over a page is modal. To choose the right one, it helps to know the whole family.

The classic modal dialog

A window in the centre of the screen with a dimmed background that blocks the page until you respond. It suits actions that need a decision: confirming a deletion, choosing an option before you continue, signing in to an account. This is the most "forceful" type, which is exactly why it is the easiest one to overuse.

Non-modal windows: toasts, banners and slide-ins

Non-modal windows appear at the side or bottom of the screen and do not block the page. You can keep scrolling and reading while they are open. Cookie banners work like this, as do "Added to cart" messages that disappear after a few seconds (toasts) and small panels that slide in from the side with an invitation to subscribe (slide-ins). For most marketing content, this is the gentler and more appropriate format.

Side drawer

A panel that opens from the side and shows, for example, the shopping cart in an online store. Visitors see what is in their cart and how much it costs without leaving the catalogue. That is a much better experience than sending them to a separate cart page and making them lose their place.

Bottom sheet on mobile

On a phone, a window that slides up from the bottom and covers part of the screen is far more comfortable than one in the middle: the buttons sit within reach of the thumb, and the sheet is easy to dismiss with a downward swipe. Most mobile apps have already taught people this pattern.

Lightbox for images and video

A full-screen window that shows an image or video at a large size against a dark background. It works well for product galleries, portfolios and demo videos.

When a popup helps your business

When a window answers a need the visitor has at that exact moment, it improves the experience and the business results at the same time. These are the most common cases.

Capturing leads

A short form in a popup lets people leave their details without hunting for the contact page. It works best when the visitor opens the window themselves, for example by clicking "Book a consultation" or "Request a quote". When the popup offers something of real value, such as a guide, a checklist or a first-order discount, it becomes a genuine marketing asset. We explain how to build that kind of offer in our guide to lead magnets.

Warnings and confirmations

"Are you sure you want to empty your cart?" sounds like one click too many, but in practice it is a safety net. A shopper who accidentally taps "Empty cart" and loses everything they picked will leave frustrated and is unlikely to start over. A short confirmation dialog prevents that. The same logic applies to deleting an account, cancelling an order or leaving a long form without saving.

Extra information without leaving the page

Size charts, delivery details, cancellation terms, a quick view of a product: all of these work well in a window, because visitors get the information they need and stay exactly where they were. That shortens the path to purchase.

Confirmations and system messages

"Message sent", "Added to cart", "You're subscribed": a short message confirming that an action worked saves visitors from wondering "Did that go through?". Here a non-modal window that disappears on its own is the better choice.

When a popup hurts: common mistakes

The same component that brings in leads can also chase them away. These are the mistakes we see most often on business websites.

A popup that fires the moment the page loads

The visitor came from Google or from an ad to read something specific. If the very first thing they see is a window asking for their email, they do not yet know who you are or why they should care. In most cases they simply go back to the search results.

Several windows at once

A cookie banner, a sign-up popup, a chat widget that opens by itself and a promotion announcement, all at the same time. The screen, and especially a phone screen, disappears under the layers. A good rule of thumb: no more than one marketing popup per visit.

Hard to close

A tiny grey X, a close button that only appears after a few seconds, or copy like "No thanks, I don't like saving money". All of these damage trust in the brand far more than they add to your lead count.

A popup that keeps coming back

A visitor who closed the window has said "no". If the same popup reappears on every page, it becomes an irritation. Remember the choice (with a cookie or the browser's local storage) and do not show the same window again for at least several days.

A popup that breaks on mobile

A window designed for a desktop screen gets cut off on a phone: the close button sits outside the visible area, the form does not scroll and the keyboard hides the fields. Since most browsing now happens on phones, design the popup for mobile first and only then adapt it for desktop: buttons within thumb reach, fields that stay visible when the keyboard opens and content that can scroll inside the window.

How to time a popup: triggers

A trigger is the event that makes the window appear. Choosing the right trigger is often the difference between a popup that generates enquiries and one that everybody closes on reflex.

Visitor click

The safest trigger of all: the window opens only when the visitor asks for it, for example by clicking "Get in touch" or "Quick view". There is no interruption whatsoever, which makes this the first format worth building.

Time on page

The window appears once the visitor has spent a certain amount of time on the page. Rather than a couple of seconds, wait until they have genuinely started reading. Find the right delay through testing, not guesswork.

Scroll depth

The window appears once the visitor has scrolled through a meaningful part of the page, for example halfway through a blog article. Someone who has read that far is interested in the topic, so an offer of an in-depth guide on the same subject is much more likely to be welcome.

Exit intent

On desktop you can detect the mouse moving towards the address bar or the tab's close button and show one last window with an offer. On phones this trigger is far less reliable, so mobile popups usually rely on scroll depth or time instead.

Context-based triggers

A specific page, the traffic source (for example, a particular campaign), returning versus new visitors, or items left in the cart. The more closely the offer matches the context, the less it feels like an interruption.

Popups and SEO: what Google says

Google has a clear position on windows that hide content on mobile devices. According to Google's page experience guidance, intrusive interstitials that make content hard to access are part of the signals that describe the user experience of a page, and such a page may rank lower.

What counts as a problem:

• a popup that covers the main content right after the visitor arrives from search results, or while they are reading;
• a standalone interstitial that has to be dismissed before the content is visible at all;
• a layout where the top of the screen looks like a popup and the actual content is pushed below the fold.

What is usually fine:

• windows required for legal reasons, such as cookie consent or age verification;
• a login dialog on a site whose content is restricted to members;
• small banners that take up a reasonable share of the screen and are easy to dismiss.

The practical takeaway: on pages that receive organic traffic, such as blog posts, service pages and product pages, use a click-triggered window, a non-modal panel or a delayed trigger rather than a full-screen popup on entry. One more thing to check: a popup that loads late and pushes the content around can hurt the page's visual stability (CLS), one of the Core Web Vitals.

Accessibility and privacy: what you need to know

An accessible popup

Accessibility is no longer just good practice. Many countries reference the international WCAG guidelines in their rules, and in the EU the European Accessibility Act now covers a range of digital services, including many online shops. A popup is one of the components where accessibility is easiest to get wrong. Here is what to check:

• Focus: when the window opens, keyboard focus moves inside it. When it closes, focus returns to the button that opened it.
• A proper focus trap: while the window is open, the Tab key cycles only through the elements inside it and does not "escape" to the page behind.
• Closing with Esc: every modal window must also close from the keyboard, not only with the mouse.
• Screen reader markup: the window has the dialog role, is marked as modal and is linked to its heading, so the screen reader announces what has opened.
• Contrast and size: readable text, a close button that is large enough, and content that does not get cut off when the text is enlarged.

You will find the complete pattern in the W3C ARIA Authoring Practices guide to the modal dialog. For the wider picture, read our website accessibility guide.

Sign-up forms and consent

If your popup collects email addresses or phone numbers for marketing messages, data protection and e-marketing rules apply. For audiences in the EU, that generally means the GDPR together with the ePrivacy rules, which in most cases require clear, freely given consent before you send marketing communications. This is a general overview, not legal advice, so check the specifics for your markets with a qualified professional. In practice, a compliant sign-up popup usually includes:

• a consent checkbox for marketing messages that is not ticked in advance;
• clear wording about what the visitor will receive and how often;
• a link to your privacy policy explaining why you collect the data and what you do with it;
• an easy way to unsubscribe in every message you send.

How to build a popup: Webflow, WordPress, Wix and code

Webflow

In Webflow, a popup is built as a regular element on the page (or as a component reused across the whole site), hidden by default and shown with Interactions: a button click, scrolling to a particular element or time on page. Forms inside the window are standard Webflow forms that can be connected to your CRM. Full accessibility, such as a focus trap and closing with the Esc key, usually requires a small amount of custom code.

WordPress

WordPress gives you several options: the Elementor Pro Popup Builder, with built-in time, scroll and exit-intent triggers, or dedicated popup plugins. Pick one plugin, check that it does not slow the site down and make sure the windows it creates can be used with a keyboard.

Wix

In Wix, popups are called lightboxes. You can set them to open when a page loads or when a button is clicked, and use Velo to add more complex logic, such as conditions based on the type of visitor.

Code: the HTML dialog element

On a hand-coded site, the modern approach is the HTML dialog element, which is now supported by all major browsers. When you open it as a modal, the browser takes care of much of the work for you: it dims the background, blocks the rest of the page, moves focus into the window and lets visitors close it with the Esc key. The JavaScript stays simple: listen for a button click, open the dialog, and on the "Yes" and "No" buttons perform the action and close it. That beats building the window from scratch out of generic blocks, where accessibility is easy to forget.

Pre-launch checklist

• the popup has been tested on phone, tablet and desktop, and in Chrome, Safari and Firefox;
• the close button is clear, large and reachable from the keyboard;
• the trigger suits the context and does not fire on entry on pages that get traffic from Google;
• the visitor's choice is remembered, and the popup does not return on every page;
• the marketing sign-up form includes explicit consent and a link to the privacy policy;
• form submissions are tracked in analytics, so you know whether the popup actually brings in enquiries.

How RJL Studio builds popups that bring in enquiries

At RJL Studio we design popups as part of the user experience of the whole site, not as an add-on stuck on at the end. We choose the type of window and the trigger based on the goal of each page, build it in Webflow, WordPress or Wix, make sure it is accessible and follows WCAG guidance, connect the form to your CRM and email platform, and measure how many enquiries it actually generates.

Want to find out whether the popups on your site are helping or getting in the way? Read about our UX/UI design services and Webflow website development, or get in touch and we will come back to you.

Frequently asked questions

Do popups hurt a website's Google rankings?

Not every popup. Google is mainly concerned with intrusive interstitials that hide content on mobile right after the visitor arrives or while they are reading. A window that opens when the visitor clicks, a small banner, or a window required for legal reasons, such as cookie consent, is not considered a problem.

When is the best time to show a popup?

When the visitor has already shown interest: after clicking a button, after scrolling through a meaningful part of the page, or when they are about to leave. Set the exact timing and scroll depth based on tests on your own site rather than on a generic average.

What is the difference between a modal and a non-modal window?

A modal window blocks the page until you respond to it, which suits decisions such as confirming a deletion. A non-modal window appears at the side or bottom of the screen and lets you keep scrolling, which suits notifications and gentle marketing offers.

Does a popup need to be accessible?

Yes. A popup is part of your website, so the same accessibility requirements apply to it as to every other page element: focus moving into the window, closing from the keyboard, proper screen reader markup and sufficient contrast. An inaccessible popup can completely block a visitor who relies on a keyboard or a screen reader.

How many popups can you show in one visit?

No law sets a number, but from a user experience point of view it is best to show no more than one marketing popup per visit, and to remember that a visitor who closed it does not want to see it again on the next page. Functional windows, such as a deletion confirmation or a size chart, do not count towards that limit.