Modal dialog box (a.k.a. modal pop-up or "dark-box") implemented exclusively via HTML5/CSS3 features without any Javasript. Could run in any modern browser even with client scripting disabled.
Modal dialog boxes (or, in other words, modal pop-ups or "dark-box") represent the quintessential component of the User Interface (UI) design. Web applications typically implement such functionality through the client-side Java scripting, but this
option could be disabled on the client machine, negatively affecting the functional integrity of the application.
Entire web application is encapsulated into a single .htm file (see downloadable attachment). It demonstrates the concept and sample implementation of modal pop-up boxes via HTML5/CSS3 styling. In addition to the modal dialog box functionality, this web application
contains a plethora of aesthetic enhancements, pertinent to modern RIA concept, achieved exclusively via novel HTML5/CSS3 features like the following:
- Rounded corners (works in FF/Chrome/Safari/IE9)
- Box shadows (works in FF/Chrome/Safari/IE9)
- Color gradients (works in FF/Chrome/Safari)
- Text shadows (works in FF/Chrome/Safari)
- Text rotation (works in FF/Chrome/Safari)
Note: IE9 still has some issues with rendering color gradients and text rotation.
Fully-functional demo is available at: http://webinfocentral.com/html5/Modalpopup.htm
You could simply click on the image below to get to the demo page. This web application is intended to serve both practical and didactic purpose, thus, for the sake of readability, the entire solution is encapsulated in a single .htm file (attached).
Slide Show (iPad 2 weekend at Apple store in New York City):