Elsewhere: 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)

Link: http://www.growldesign.co.uk/projects/lb/#close

There have been 8 replies

  1. 1

    Foss

    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.

    (This comment was left on For A Beautiful Web)

    4th Sep 2009
  2. 2

    Keith

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

    4th Sep 2009
  3. 3

    Christopher Meyers

    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!

    (This comment was left on For A Beautiful Web)

    4th Sep 2009
  4. 4

    Brandon Durham

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

    (This comment was left on For A Beautiful Web)

    4th Sep 2009
  5. 5

    KS

    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.

    (This comment was left on For A Beautiful Web)

    4th Sep 2009
  6. 6

    Christopher Meyers

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

    (This comment was left on For A Beautiful Web)

    4th Sep 2009
  7. 7

    Brandon Durham

    @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.

    (This comment was left on For A Beautiful Web)

    4th Sep 2009
  8. 8

    Christopher Meyers

    @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.

    (This comment was left on For A Beautiful Web)

    4th Sep 2009
Commenting is not available in this weblog entry.

From the archives

An archive of blog entries since 2004 on subjects including CSS, web standards, accessibility, website design and development.