Open Source DOM Component


A classy dialog box

by Read Write Tools
The rwt-shadowbox DOM component is a popup dialog box with titlebar caption, close button, shortcut key access, event interface, and either slotted or templated content.


Dialog boxes are such a common design pattern that they need no explanation. HTML5 has a special dialog tag for that very purpose. Unfortunately, the HTML dialog tag does not provide any "standard" behavior for how it should appear. Nor does it provide a convenient way for the user to dismiss it.

The rwt-shadowbox DOM component has several features which overcome those limitations, and make for a more pleasant user experience.

  • The dialog box has a titlebar with caption and close button.
  • The contents may be slotted or provided with a template file.
  • The dialog has an event interface for showing and hiding itself.
  • The dialog emits a custom event to close sibling dialog boxes.
  • A keyboard listener is provided to allow a shortcut key to open/close the dialog.

In the wild

To see an example of this component in use, visit the READ WRITE TOOLS website and press F2 "Info" or F3 "Rights". To understand what's going on under the hood, use the browser's inspector to view the HTML source code and network activity.


DOM components logo Documentation READ WRITE HUB
git logo Source code github
DOM components logo Component catalog DOM COMPONENTS
npm logo Package installation npm
Read Write Stack logo Publication venue READ WRITE STACK
Read Write Tools icon

Smart tech


Read Write Hub icon

Distraction-free writing



Rediscover HTML


Read Write Serve icon

Served with pure HTTP/2


Open Source DOM Component

🔗 🔎