Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Create a Modal Window with CSS

display: none for input checkbox?

I noticed that in the modal windows tutorial, the input checkbox was positioned absolutely and then moved offscreen. Can you also set input to display: none? Any cross-browser compatibility problems or other problems I am not thinking of?

3 Answers

Steven Parker
Steven Parker
229,920 Points

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.