Age Gate Popup

A full-screen age gate that blocks content until the visitor confirms. Session or 30-day memory, screen-reader friendly.

Copied 1 time.

Are you 18 or older?

You must be of legal age to enter this site.

Yes, I am 18+No

Customize the prompt

Build a full-screen age gate for my website. Match my existing design system, colors, and fonts.

STRUCTURE
- A full-viewport opaque overlay (no page content visible or interactive behind it) with a centered card, max width 420px.
- Card contents: my logo placeholder at the top, a headline stating the age requirement, one line explaining why, the verification control, and a small legal-style footer line (leave a TODO for my exact legal wording; I am responsible for compliance in my jurisdiction).

VERIFICATION
- Verification is a binary question: "Are you 18 or older?" with two equal-width buttons, "Yes, I am 18+" and "No". The age number comes from a config constant so I can change it (18, 21...).
- Failing the check routes to a polite "you must be [age]+ to enter" state with a link away from the site (config constant for the URL). Never let a failed check through.

MEMORY
- On success, set a sessionStorage flag: the visitor re-verifies next visit. Do not use localStorage.
- Until verification passes, the gate renders before any page content is interactive. Block scroll on the body while the gate is up.

BEHAVIOR
- The gate cannot be dismissed with Escape, overlay clicks, or the browser back button trick; the only way through is the check itself.
- No third-party calls, no cookies beyond the storage flag described above.

ACCESSIBILITY AND QUALITY
- role="dialog", aria-modal="true", focus trapped inside, first control focused on open.
- All controls fully keyboard-operable; visible focus rings.
- The gate renders server-side or before first paint where my stack allows it, so gated content never flashes; leave a TODO noting where to hook this into my rendering.
- Responsive: card full-width with margins on small screens.

QUESTIONS
- Before you build, find or ask for: the required age, the jurisdiction my legal wording must cover, and the URL failed visitors are sent to. Check my project and site first; whatever you cannot find there, ask me for. Never invent these or ship placeholders.
- If anything else about my brand or content is unclear, ask me before inventing.

What it does

An age gate is the full-screen check that stands in front of your site when the law says visitors must be a certain age: alcohol, vaping, gambling, adult content. Nothing behind it shows or works until the visitor passes. Your logo sits on top so it still feels like your site.

  • No sneaking past it: not Escape, not clicking around it, not the back button.
  • Failing the check leads to a polite you-must-be-older page with a link away.
  • Fully usable with a keyboard and friendly to screen readers.
  • A pass is remembered for the visit or for 30 days, your choice.

How it works

  1. 1Pick how visitors verify, a simple 18-plus yes or no, or typing their date of birth, and how long a pass is remembered.
  2. 2Copy the prompt, one copied block your AI builds the whole gate from, into whichever AI you use.
  3. 3Set your required age and the link for visitors who fail; both live in one marked spot in the code.
  4. 4Swap the placeholder legal line for your own wording; the code marks the spot and reminds you compliance rules are yours to check.
  5. 5Try to cheat it before shipping: Escape, clicking outside, the back button. The only way in should be passing the check.
  6. 6Check that the page behind stays frozen: no scrolling, nothing clickable, until the gate says yes.

What you can customize

  • How they verify: yes or no is one tap and least friction; date of birth actually checks the math and rejects impossible dates.
  • Remember for how long: this session makes everyone re-verify next visit, the strict option; 30 days lets regulars skip the gate for a month.
  • The age, the wording, and the look adapt to your site automatically, because your AI builds the gate right inside your own design.

You'll also like

Next up

NYE Festival, Dec 31

THULocal Heroes NightFree entry before midnight
FRIThe Classics2-for-1 happy hour until 11
SATGuest HeadlinerBook a booth early

Events Calendar

A what's-on listing for venues: every upcoming event with its day, name, and hook, past events gone automatically.

fxinwa
Link copied

Sticky Share Bar

A small share rail with plain share URLs only. No SDKs, no trackers, no fake counters.

iHow this works

Note Box

A calm callout block for the things readers need to know: how it works, why to trust you, what to watch for.