Project Description

Modal dialog box (a.k.a. modal pop-up or "dark-box") implemented exclusively via HTML5/CSS3 features without any Javascript. 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.

As a good alternative, the modal pop-up box could be implemented by using "pure" HTML5/CSS3 features [1...3], avoiding any JavaScripting and, therefore, providing a more robust solution, effectively resolving the issue of client's browser script settings 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: 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).

John Travolta, Nicolas Cage

 Similar functionality is implemented in HTML5/CSS3 Slide Show app (no Javascript!): LINK

Last edited Aug 20 at 3:01 PM by DrABELL, version 10