v2.1 • UI • 4kb gzipped • MIT
DialogJS
Focus-trapped dialogs built on the native element, with the edge cases already handled.
// why dialogjs
Native, with the gaps filled
Built on the platform dialog element and then patched where browsers still disagree — scroll locking, focus return and stacked dialogs.
// stack
Predictable focus
Focus enters the first meaningful control, stays inside, and returns exactly where it came from on close.
DialogJS started as a single file in a client project and stayed small on purpose. It does one job, it does it in 4kb gzipped, and it has no runtime dependencies.
Getting started
Install it, import it, call it:
npm i dialogjs-jsBuilt on the platform dialog element and then patched where browsers still disagree — scroll locking, focus return and stacked dialogs.
What it does not do
It does not manage your state, style your components or ship a plugin system. Those are your decisions, and keeping them out is what keeps the bundle honest.
- Real scroll locking
- Stacked dialogs
- MIT licensed, commercially friendly
Features
Real scroll locking
Holds body scroll without the layout shift that a naive overflow toggle causes.
Stacked dialogs
A dialog opened from a dialog restores focus down the stack in the right order.
Dark mode ready
Reads from CSS custom properties, so a theme switch needs no JavaScript at all.
Container aware
Adapts to the box it is given rather than the viewport, so it works in a sidebar.
Accessibility audited
Tested against screen readers on three platforms, with the findings published in the repository.
ESM and types
Ships module and CommonJS builds with hand-written type definitions and source maps.
Get DialogJS v2.1
4 files • .min.js 4kb • .zip 37kb • sha384 verified
Changelog
- Stacked dialog focus restoration
- Scroll lock no longer shifts layout
- Safari inert polyfill dropped
- Fixed a memory leak on repeated teardown
- Source maps now published with every build
- Type definitions rewritten by hand
- Dropped the last runtime dependency
// related
Related products
ChartForge
Canvas charts in twelve lines. Responsive, accessible and dark-mode ready, with no D3 learning curve.
View →MotionEase
Physics-based micro-animations with a single call. Spring curves that feel right without a tuning session.
View →FormFlow
Validation and multi-step logic that works the same in React, Vue and vanilla. Your markup stays yours.
View →Ship the interface today.
MIT licensed. Commercial friendly. Five-minute setup.