Project Description

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.

Introduction

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.

Solution
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 (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.

Demo

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

John Travolta, Nicolas Cage

 

 

 

 

 

 

 

 

 

Resources

Similar functionality is implemented in another HTML5/CSS3 (no Javascript!) web application: Slide Show (iPad 2 weekend at Apple store in New York City): LINK

Last edited May 16, 2011 at 8:38 PM by DrABELL, version 5