Photograph of Loch Salach a'Ghiubhais, a lake surrounded by low hills, with the sun peeking through clouds

Both the HTML5 Fullscreen and Dialog APIs are vital to modern web applications: the Fullscreen API eliminates browser UI and scrollbars, leaving just the elements on the web page you want the user to focus on, while the Dialog API presents modal windows in front of content, focussing the user’s attention and limiting their interactivity. Both are useful in a variety of applications, from games to kiosks.

As both of these APIs depend entirely on to work, they’re included in the JavaScript reading list. However, they are both considered HTML5 APIs; Dialog even introduces an element of the same name.

Time: 1 hour

Prerequisites: A good understanding of both HTML & CSS.

The FullScreen API

  1. Intro
  2. Switching to Retina Images in Fullscreen
  3. Simple Fullscreen Slideshow

The Dialog API

  1. Using the dialog Element
  2. Modern HTML5 Lightbox w/ Dialog

Photograph by Tim Haynes, licensed under Creative Commons