That’s a neat trick with the checkbox, as well as some fantastic demos, Paul!
Really impressive!
With your original demo, would it be possible to apply the checkbox trick, so that if a user clicked anywhere on the overlay, the overlay shut?
You could do it for browsers other than chrome because chrome has a bug with positioned fixed and applies a z-index of zero by default and not auto. That means you can’t weave a layer between a fixed positioned parent and its children which would we would need to do here. You could probably do it by putting the clickable div underneath and then using pointer-events to allow the click to pass through to the label underneath. I’d have to experiment a bit more 
I just had to Google pointer events:
The pointer-events property allows for control over how HTML elements respond to mouse/touch events – including CSS hover/active states, click/tap events in Javascript, and whether or not the cursor is visible.
So from within CSS you could specify how an element can respond to a mouse click?
Yes pointer-events allows the click to pass through the element as though it wasn’t there and content underneath can still be clickable. It’s not fully supported yet but is very useful. You can for example place an element on top of an anchor and still have the anchor clickable.
Turns out it never will be fully supported, as Chrome has recently decided to dump it:
https://code.google.com/p/chromium/issues/detail?id=162757#c64
http://lists.w3.org/Archives/Public/public-pointer-events/2014JulSep/0051.html
Kind of a shame, but I’m still not sure how I feel CSS about implementing behaviour on a web page …
it is very cool!
if you are really bored…can you tweak it for ie8? 
(boy this emoticons are kinda crappy)
The css pointer-events property is certainly not being dumped and is well supported in modern browsers. You are referring to the pointer events specifications which is something entirely different.
1 Like
Thanks for setting me straight, Paul!