Shadowbox

Abstract
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.

Motivation

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.

Reference

	Documentation	READ WRITE HUB
	Source code	github
	Component catalog	DOM COMPONENTS
	Package installation	npm
	Publication venue	READ WRITE STACK