Modal Windows with HTML and CSS

Recently I was asked to implement a modal/pop-up window into a clients project. These types of interaction are nothing new and have been readily available with a little help from our good old friends HTML, CSS and JavaScript.

However, I wondered if it would be possible to create this without the use of JavaScript. Obviously there are plenty of packages out there such as fancybox and thickbox, so this has been created purely as an experiment and not something which should be released into the wild, due to it not working well in older browsers. It’s also worth noting that this isn’t going to be the cleanest or best implementation as it was thrown together in the space of a few hours but for a first attempt, I’m pretty happy with it.

The code is fairly simplistic and the all CSS needed for this, barring the reset, is located within the <head>. So open a modern browser and have a look at my take on a modal window created with HTML and CSS.