display: none for input checkbox?

Using display:none would also be my first choice for hiding an element completely. As far as I know, this has been fully supported in all browsers for many versions.

Just a wild guess, but perhaps this method of hiding things is just a habit acquired from working with a lot of graphic-intensive things like sprites?

An afterthought: when revealing a hidden element, moving one in from off-screen my produce less visual jitter than changing the display mode, since when display:none is in effect, no space is allocated for them.

You might want to pose this question directly to the teacher, and if so please share any answer you may get here!

Thanks Steven! Would rather use display: none. I personally like to reduce the amount of positioned elements on a page if I can.

I encountered a funny problem. If I strip the code in this workspace down to just the modal html and modal css, I can still highlight the modal wrap text, even though it is way behind in the stacking order. I can even reposition the modal wrap to get the pointer to work over the hidden .close checkbox (clicking on it then brings the overlay to the front).

The only way I can think of solving this is to set the transform scale on the overlay to a very tiny number (0.1) so that it will be hard to mistakenly mouse over the "ghost" modal wrap.

I searched around for a solution and came across this sweet post: http://www.greywyvern.com/?post=337

Turns out you can do transitions on visibility, so all I did was set the overlay to hidden and then transition it to visible. There is a trick or two in the post that you need to use but this was the fix that worked for me.