Dialog and the top layer
Click to open a modal dialog
Click to open a z-index div
This is a demo of the top layer. Modal dialogs are in the top layer, a new
stacking layer on top of the existing CSS layering stack. Here are some
characteristics of the top layer.
- Adding and removing
dialog.showModal() is called,
dialog is pushed to the top of the top layer stack. Calling
dialog.close() removes it from the top layer.
- z-index interaction
- The top layer defeats any z-index. z-index doesn't affect elements in the
top layer, just their position in the top layer stack does. However, the elements within
the subtree of a top layer element be ordered amongst themselves using z-index.
- Fullscreen API
- The top layer is used by both <dialog> and the Fullscreen API (but the Fullscreen part
is not yet implemented). This way there is no ambiguity of "always on top"
- Windows plugins
- The top layer is rendered above any plugins like Flash (not yet implemented).
Click the button in the lower left to open a modal dialog. Filler text follows to allow scrolling.