Stuff & Nonsense Home

Where you’ll find designer, author and speaker Andy Clarke. The bastard.

Blogging And All That Malarkey

A valid XHTML & CSS Lightbox (no JavaScript)

This is brilliant. Amazing. Did I say brilliant? Now I’m figuring out how she did it. (Source)

Leave your comment

Foss

September 4 2009 @ 09:23pm #

Works great in Firefox, and it’s very clever. It doesn’t seem to work in Opera 10 though. Shame, because it’s such a great idea.

Keith

September 4 2009 @ 10:23pm #

There’s a write-up of the method here: http://carsonified.com/blog/design/css/how-to-create-a-valid-non-javascript-lightbox/

Christopher Meyers

September 4 2009 @ 11:13pm #

Really? This is brilliant? Dangit! I have been using this since I learned about :target. Used it in some wireframes last night. I need to start writing stuff like this up!

Brandon Durham

September 5 2009 @ 01:07am #

Downside is there’s no way to close on ESC, which is a problem with most modal windows.

KS

September 5 2009 @ 03:05am #

It’s very clever, and elegant. In Chrome on Windows, the Back Button shows the lightbox again. I’m not sure of a way around that.

Christopher Meyers

September 5 2009 @ 05:12am #

@Brandon Durham and @KS
I am not experiencing any of these issues you are mentioning, could you offer some more details?

Brandon Durham

September 5 2009 @ 05:28am #

@Christopher Meyers - The modal doesn’t close when you hit “ESC”. Call it personal preference, but I think all lightboxes should close on ESC. I know that would introduce the need for Javascript, but I think it’s necessary.

Don’t get me wrong - it’s a really great method, and a really nice way to handle the possibility of Javascript being disabled in a browser.

Christopher Meyers

September 5 2009 @ 05:45am #

@Brandon Durham Ahh, so the literal interpretation was the one I should have used. My bad. I can definitely see the value in the behavior you described, it would be a helpful .js enhancement on the CSS, as would a fade-in.

I do like the ability to back out of the modal using the browser’s back feature, although it is, currently, non-intuitive.

Commenting is not available in this channel entry.
Hardboiled Web Design

Hardboiled Web Design by Andy Clarke

How the latest technologies and techniques will make your websites more creative, flexible and adaptable. Get hardboiled in all formats from Five Simple Steps. Digital formats also available at Amazon.com, Amazon.co.uk and the iBooks store.

We’ve deconstructed this site to focus on content while we restyle. Expect wonkiness during the transition.