Session Timeout Warning Modal — Free HTML CSS JS Snippet

Session timeout warnings exist to protect users on shared or unattended devices — banking portals, healthcare records, and admin dashboards routinely sign users out after a period of inactivity to reduce the window during which a walked-away, unlocked screen could expose sensitive data. This snippet implements the complete pattern: real idle detection tied to genuine user activity, a calm (not jarring) warning modal with a visible countdown, and two clearly differentiated actions — stay signed in, or log out immediately.

Real activity detection, not just a fixed timer

The core of a trustworthy session-timeout system is that the idle clock resets on genuine user activity, not only when the user happens to click a specific button. This snippet attaches listeners for mousemove, keydown, click, scroll, and touchstart directly on document, and every one of them calls registerActivity(), which restarts startIdleTimer() from zero. Without this, a user actively reading a long document or filling out a multi-minute form — who is genuinely present and engaged, just not clicking anything for a while — would get logged out mid-task, which is exactly the kind of jarring, trust-eroding surprise that calm interface design tries to avoid. The listeners are registered with { passive: true } since none of them need to call preventDefault(), which keeps scrolling and touch interactions smooth.

Throttling to avoid interval churn

A raw mousemove listener can fire dozens of times per second during normal cursor movement. Calling startIdleTimer() — which clears and restarts a setInterval — on every single one of those events would be wasteful and could cause visible jank. The registerActivity() function guards against this with a simple throttled boolean flag: once activity resets the timer, further activity events are ignored for 400ms before the guard resets, so the interval is restarted at most a couple of times per second during continuous activity rather than hundreds.

Why the warning modal is calm, not a jump-scare

A poorly designed session-timeout UX slams a full-screen red modal onto the page the instant a countdown hits zero, with no warning beforehand — a jarring interruption regardless of what the user was doing. This snippet instead surfaces a visible countdown before the modal even needs to appear: the demo page shows a live "idle for Ns / 15s" readout and a progress bar that gradually shifts from the accent color to amber as the limit approaches, so a genuinely attentive user has ambient awareness the whole time, not just a sudden alert. When the modal does appear, it uses a soft blurred backdrop, a centered card with generous padding, a neutral icon (a clock, not a warning triangle), and calm, first-person copy ("You've been idle a while... we'll sign you out soon") rather than alarmist language. The countdown itself is rendered as a smooth SVG ring (stroke-dashoffset animated via transition: stroke-dashoffset 1s linear) alongside a large numeral, giving the user a precise, low-anxiety sense of exactly how much time remains and genuine control to act.

Two clearly weighted actions

The modal offers "Stay signed in" as the visually primary, filled button and "Log out now" as a secondary outlined button — both fully functional, both a single click away, with neither hidden or de-emphasized to the point of being hard to find. This respects user agency: someone who genuinely wants to end their session on a shared computer should be able to do so immediately, not be funneled only toward staying logged in.

Why this matters for 2026 calm interfaces

Session timeout handling is one of the clearest real-world tests of "calm interface" design — it is a security-critical interruption that must not feel like a jump-scare. Getting it right (ambient countdown before the modal, activity-based resets, equally weighted actions, smooth ring animation) is what separates a security feature that builds trust from one that trains users to reflexively dismiss security prompts.