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.
uncertainties. 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
- Box shadows
- Color gradients
- Text shadows
- 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).