Modal / Popup Generator

Build a popup without sacrificing keyboard usability. The generated dialog traps focus while open, restores focus to the trigger when closed, supports Escape, and avoids manipulative forced interactions.

Live preview

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Generated website component</title><style>body{margin:0;padding:20px;font:16px/1.6 system-ui;color:#172033}*{box-sizing:border-box}button,input,textarea,select{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}a:focus-visible,button:focus-visible{outline:3px solid #2563eb;outline-offset:3px}:root{--fg:#172033;--bg:#ffffff}.stg-box{padding:24px;border-radius:12px;border:1px solid #dbe3ee;background:var(--bg);color:var(--fg)}.stg-button{padding:10px 16px;border-radius:8px;border:1px solid #cbd5e1;background:#2563eb;color:#fff;text-decoration:none;display:inline-block}.stg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px}.stg-muted{opacity:.8}.stg-card{padding:20px;border:1px solid #cbd5e1;border-radius:12px}.stg-controls{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0}.stg-image{max-width:100%;height:160px;object-fit:contain}button:focus-visible,a:focus-visible{outline:3px solid #2563eb;outline-offset:3px}.stg-modal{max-width:min(90vw,560px)}.stg-modal::backdrop{background:#0f172a88}
@media(prefers-reduced-motion:reduce){.stg-animated,.stg-animated *{animation:none!important;transform:none!important;opacity:1!important;clip-path:none!important;position:static!important;white-space:normal!important}.stg-message,.stg-track{width:auto!important;max-width:100%!important;overflow-wrap:anywhere!important}.stg-viewport{height:auto!important;overflow:visible!important}.stg-track{flex-wrap:wrap!important}.stg-duplicate{display:none!important}}</style></head><body><button class="stg-open stg-button">Open popup</button><dialog class="stg-modal stg-box" role="dialog" aria-modal="true" aria-labelledby="stg-modal-title"><h2 id="stg-modal-title">Your headline</h2><p>Add a clear message for your visitors.</p><img class="stg-image" width="320" height="160" src="https://scrollingtextgenerator.com/examples/logo-one.svg" alt=""><p><a href="https://example.com/" rel="noopener noreferrer">Learn more</a></p><button class="stg-close stg-button">Close</button></dialog><script>const dialog=document.querySelector('.stg-modal'),opener=document.querySelector('.stg-open');let previous;function open(){previous=document.activeElement;dialog.showModal();dialog.querySelector('button').focus();}opener.onclick=open;dialog.querySelector('.stg-close').onclick=()=>dialog.close();dialog.addEventListener('close',()=>previous?.focus());dialog.addEventListener('cancel',ev=>{});dialog.addEventListener('click',ev=>{const r=dialog.getBoundingClientRect();if(ev.target===dialog&&(ev.clientX<r.left||ev.clientX>r.right||ev.clientY<r.top||ev.clientY>r.bottom))dialog.close();});</script></body></html>

What this generator does

Click, delay, and one-time session triggers.
Title, body, image and CTA fields.
Focus trap, Escape close and overlay close options.
Optional session/local storage frequency cap.

How to use

Choose the trigger.
Add concise popup content and CTA.
Choose close behavior and frequency cap.
Style the panel and overlay.
Test keyboard and mobile behavior.
Copy the code.

Best practices

Avoid intrusive interstitials that block the main content immediately.
Always provide a clear close control.
Do not repeatedly reopen a dismissed popup.

Frequently asked questions

Does the generated modal support Escape?

Yes, unless you deliberately disable it; the recommended preset keeps Escape enabled.

Can I show it only once?

Yes. Use the session or local-storage frequency cap.

Related tools & guides

Notification / Toast Generator

Create an accessible notification toast for success, error, warning or information messages. Configure placement, duration and actions, then copy the code.

Cookie Consent Banner Generator

Generate a customizable cookie-consent banner starter with accept, reject and preferences controls. No legal-compliance claim is made; adapt it to your site and consent platform.

Hero Section Generator

Design a responsive landing-page hero with headline, supporting text, CTA buttons, image or gradient background and copyable HTML/CSS.