Treehouse
writes on September 4, 2009
I recently came across a solution on CSSPlay for a JavaScript free lightbox that uses invalid markup. So, being a sucker for a challenge, I set myself the task of creating one with valid markup and I eventually succeeded.
Here’s one I made earlier. It works in FF, Safari, Chrome, IE6, IE7 and IE8 and this article will explain how…
Note: This article assumes you have a basic understanding of (X)HTML and CSS.
Contents
Step 1: Writing the Markup
<div id="container">
<div id="header">
<h1>A valid XHTML and CSS Lightbox (no JavaScript)</h1>
<p><strong>by Jenna Smith</strong></p>
</div>
<div id="content">
<h2>Click any of the links below to see it in action</h2>
<p>Lorem ipsum dolor sit amet, consectetur <a href="#">about us</a> adipiscing elit.
Donec massa lorem, elementum et mollis non, viverra a est. Proin nunc orci, tristique at egestas et,
interdum ac ipsum. Nulla <a href="#">more info</a> vulputate erat ac gravida. Mauris facilisis, leo ac condimentum commodo,
justo eros molestie dolor, a posuere orci tortor sed lacus. Suspendisse dictum, magna eu posuere tempor,
augue diam tempor lacus, sed hendrerit nulla ante quis justo. Aliquam eget tellus risus.</p>
</div>
<div id="footer">
<p>Copyright 2009 Jenna Smith</p>
</div>
</div>
You will notice the markup is very simple at the moment and that we have two links leading nowhere. These links will eventually
trigger lightboxes, but before they do, we need to add the markup for said lightboxes after the container <div>:
<ul id="lightboxes">
<li id="lightbox-about">
<div class="box">
<h3>About</h3>
<p>
Duis eros nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non
risus dignissim placerat et eu dolor. Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt.
Praesent bibendum sagittis elit, nec convallis enim tincidunt quis.
</p>
<p>
Duis eros nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non
risus dignissim placerat et eu dolor. Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt.
Praesent bibendum sagittis elit, nec convallis enim tincidunt quis.
</p>
<a href="#" class="close" title="close window">x</a>
</div>
</li>
<li id="lightbox-more">
<div class="box">
<h3>More stuff</h3>
<p>
Duis eros nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non
risus dignissim placerat et eu dolor. Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt.
Praesent bibendum sagittis elit, nec convallis enim tincidunt quis.
</p>
<a href="#" class="close" title="close window">x</a>
</div>
</li>
</ul>
This is by no means semantic but I chose this markup because it made managing the CSS a little simpler. I’d recommend leaving the markup as is for the purposes of following this tutorial, however, feel free to code this part as you wish as long as you use the same amount of elements and tweak the CSS where necessary.
Step 2: Making it Look Pretty
Add the following CSS to the <head> of your document (we will be doing CSS inline to simplify this tutorial):
html {
font-size: 75%;}
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;}
body {
background-color: #f8f8f8;
font-family: arial, helvetica, sans-serif;
color: #777;
text-align: center;
font-size: 1.0833em;
line-height: 1.6923em;}
a {
color: #09F;}
h2 {
font-weight: normal;}
p {
margin: 0 0 1.6923em 0;}
#container {
width: 100%;
height: 100%;}
#header,
#content,
#footer {
text-align: left;
width: 870px;
margin: 0 auto;
padding: 40px;}
#header,
#footer {
background-color: #eee;}
#header h1 {
margin: 0;}
#header p {
margin: 5px 0 0;}
#content {
background-color: #fff;}
/* ---------------------------------------------------------- */
/* LIGHTBOXES
/* ---------------------------------------------------------- */
#lightboxes {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
list-style-type: none;
text-align: left;}
#lightboxes li {
width: 100%;
height: 9999px;
position: relative;
background: rgba(0,0,0,.5);}
#lightboxes .box {
position: absolute;
width: 400px;
height: 400px;
left: 50%;
top: 50px;
border: 10px solid #999;
margin-left: -230px;
background-color: #fff;
padding: 20px;}
#lightboxes h3 {
font-weight: normal;
font-size: 1.8461em;
margin: 0 0 0.4583em 0;}
#lightboxes a.close {
position: absolute;
top: 20px;
right: 20px;
display: block;
width: 20px;
line-height: 20px;
text-align: center;
background-color: #ddd;
text-decoration: none;
font-weight: bold;
color: #999;
font-size: 1.2em;}
#lightboxes a.close:hover {
background-color: #999;
color: #fff;}
This should all be relatively easy to understand, however I just want to go over a few areas and clarify why some elements have been given certain properties. Mainly the following lightbox styling:
#lightboxes li {
width: 100%;
height: 9999px;
position: relative;
background: rgba(0,0,0,.5);}The <li>s in my example are acting as the lightbox overlay that you see underneath the lightbox ‘box’ itself so I have given it an extremely large height of 9999px with the assumption that no one will have a resolution larger than that. The reason for not using a 100% height is because it causes a window resize bug… feel free to try it at the end of the tutorial to see what I mean and if you can come up with a better solution, please do share!
Next you will notice that I am using an RGBa background colour. If you are not sure what this is/does please read about RGBa on CSSTricks. Internet Explorer, as ever, doesn’t support RGBa so in order to get around this, we need to add some IE specific styling and markup. Place the following CSS in the <head> of your document:
<!--[if IE]>
<style type="text/css">
#lightboxes .ie-bg {
background: #000;
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
filter: alpha(opacity=75);}
</style>
<![endif]-->Then add the following markup to the bottom of your lightboxes (before the closing </li> of each lightbox):
<!--[if IE]>
<div class="ie-bg"></div>
<![endif]-->I’m sure someone will point out that this causes the ActiveX popup to appear in IE resulting in the non-JavaScript element of this tutorial being void however, this would still all work fine without the filter so that is purely aesthetics and not functionality.
Moving on…
Step 3: Positioning the Lightboxes
When previewing our progress you will have seen that the lightboxes currently sit below the content which isn’t much like lightbox behaviour. The lightboxes need to sit on top of our content so a few more CSS properties are required to achieve this. Append this next snippet to your #container styling:
position: absolute;
top: 0;
left: 0;Now this is where things get a little confusing. Why did I add it to the #container and not the #lightboxes element? That’s because if I added it to the #lightboxes element it’s child elements would always be on top of our #container (no matter what) so we would never be able to click the links in the content again, even when the lightboxes are ‘closed’. Doing it this way enables us to position the #container between the #lightboxes child elements and you will see why this is necessary in the next step.
We also only ever want to see one lightbox at a time so adding overflow: hidden; to your #lightboxes styling will accomplish that. This works because the #lightboxes element was given a height of 100% in the CSS which will make it 100% height of your window. Therefore, it hides anything past the height of the window. However, Internet Explorer requires a little extra in order to achieve the same effect so make sure you add the following to your IE specific CSS within the conditional comment we added earlier:
#lightboxes {
position: relative;}Step 4: Opening and Closing the Lightboxes
So we’ve got it looking good and everything is positioned in the right place but how do we open and close the lightboxes? Simples.
I’m sure you are all aware of linking to an an element on the same page with the use of the ID attribute and how it works. However, you may not have known that linking to an element that is hidden off the page causes the element to be “pulled” into view as opposed to the window jumping down to that element. I used the same technique on my Auto-Scrolling Slideshow Tutorial which further demonstrates how powerful this technique can be.
So with that in mind I can change the href values of our content links to the ID values of the lightboxes and create a new #close element that our close buttons will link to. Your markup would then look as follows:
<div id="container">
<div id="header">
<h1>A valid XHTML and CSS Lightbox (no JavaScript)</h1>
<p><strong>by Jenna Smith</strong></p>
</div>
<div id="content">
<h2>Click any of the links below to see it in action</h2>
<p>Lorem ipsum dolor sit amet, consectetur <a href="#lightbox-about">about us</a> adipiscing elit.
Donec massa lorem, elementum et mollis non, viverra a est. Proin nunc orci, tristique at egestas et,
interdum ac ipsum. Nulla <a href="#lightbox-more">more info</a> vulputate erat ac gravida. Mauris facilisis, leo ac condimentum commodo,
justo eros molestie dolor, a posuere orci tortor sed lacus. Suspendisse dictum, magna eu posuere tempor,
augue diam tempor lacus, sed hendrerit nulla ante quis justo. Aliquam eget tellus risus.</p>
</div>
<div id="footer">
<p>Copyright 2009 Jenna Smith</p>
</div>
</div>
<ul id="lightboxes">
<li id="close"></li>
<li id="lightbox-about">
<div class="box">
<h3>About</h3>
<p>
Duis eros nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non
risus dignissim placerat et eu dolor. Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt.
Praesent bibendum sagittis elit, nec convallis enim tincidunt quis.
</p>
<p>
Duis eros nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non
risus dignissim placerat et eu dolor. Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt.
Praesent bibendum sagittis elit, nec convallis enim tincidunt quis.
</p>
<a href="#close" class="close" title="close window">x</a>
</div>
<!--[if IE]>
<div class="ie-bg"></div>
<![endif]-->
</li>
<li id="lightbox-more">
<div class="box">
<h3>More stuff</h3>
<p>
Duis eros nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non
risus dignissim placerat et eu dolor. Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt.
Praesent bibendum sagittis elit, nec convallis enim tincidunt quis.
</p>
<a href="#close" class="close" title="close window">x</a>
</div>
<!--[if IE]>
<div class="ie-bg"></div>
<![endif]-->
</li>
</ul>
You won’t be able to test this at the moment because the empty #close element is sitting on top of the #container disabling you from clicking anything. However, if you append ‘#lightbox-about’ to your URL you will notice the about lightbox appears and that changing it to ‘#close’ will bring the empty lightbox element back into view. Neat huh?
Now we need to remove the background colour from the #close element so that it looks as if nothing is there and position it behind the #container element so that we can click the #container links.
Remember I mentioned positioning the #container between the lightbox elements in the last step? Well this is why and it would not be possible if we had absolutely positioned the #lightboxes instead of the #container.
This next piece of CSS needs to be added to style the #close element as mentioned above:
#lightboxes #close {
background-color: transparent;
z-index: -1;}
Now you can open and close the lightboxes as expected!
How does that work? Well, if you do not set a z-index on an element then it will be layered depending on it’s position in the code. Therefore, the lightbox <li>s automatically appear above the container as they are further in the markup. However, by giving one of them a minus z-index I am forcing it behind any elements that precede it.
Step 5: Adding More Content to the Container
At the moment we haven’t got much content in our container so it all appears to be working fine. However, if you add pages and pages of content you will notice that we’re not quite finished. A scrollbar appears enabling you to scroll past the lightbox and it’s overlay. This is because the document is scrolling but the lightbox is only 100% height of the window, not the document. The #container is also 100% height of the window so a simple solution is to overflow the container so that it scrolls instead of the document by adding overflow: auto; to the #container element.
It will make more sense if you preview it in Internet Explorer where you will see two scroll bars. One for the #container and a disabled scrollbar for the document. This is easy to fix by adding the following CSS to your IE specific CSS:
html {
overflow-y: auto;}…and we’re done.
Your document in it’s entirety should be similar to below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>XHML and CSS Lightbox</title>
<style type="text/css">
html {
font-size: 75%;}
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;}
body {
background-color: #f8f8f8;
font-family: arial, helvetica, sans-serif;
color: #777;
text-align: center;
font-size: 1.0833em;
line-height: 1.6923em;}
a {
color: #09F;}
h2 {
font-weight: normal;}
p {
margin: 0 0 1.6923em 0;}
#container {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow: auto;}
#header,
#content,
#footer {
text-align: left;
width: 870px;
margin: 0 auto;
padding: 40px;}
#header,
#footer {
background-color: #eee;}
#header h1 {
margin: 0;}
#header p {
margin: 5px 0 0;}
#content {
background-color: #fff;}
/* ---------------------------------------------------------- */
/* LIGHTBOXES
/* ---------------------------------------------------------- */
#lightboxes {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
list-style-type: none;
text-align: left;
overflow: hidden;}
#lightboxes li {
width: 100%;
height: 9999px;
position: relative;
background: rgba(0,0,0,.5);}
#lightboxes .box {
position: absolute;
width: 400px;
height: 400px;
left: 50%;
top: 50px;
border: 10px solid #999;
margin-left: -230px;
background-color: #fff;
padding: 20px;}
#lightboxes h3 {
font-weight: normal;
font-size: 1.8461em;
margin: 0 0 0.4583em 0;}
#lightboxes a.close {
position: absolute;
top: 20px;
right: 20px;
display: block;
width: 20px;
line-height: 20px;
text-align: center;
background-color: #ddd;
text-decoration: none;
font-weight: bold;
color: #999;
font-size: 1.2em;}
#lightboxes a.close:hover {
background-color: #999;
color: #fff;}
#lightboxes #close {
background-color: transparent;
z-index: -1;}
</style>
<!--[if IE]>
<style type="text/css">
html {
overflow-y: auto;}
#lightboxes {
position: relative;}
#lightboxes .ie-bg {
background: #000;
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
filter: alpha(opacity=75);}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="header">
<h1>A valid XHTML and CSS Lightbox (no JavaScript)</h1>
<p><strong>by Jenna Smith</strong></p>
</div>
<div id="content">
<h2>Click any of the links below to see it in action</h2>
<p>Lorem ipsum dolor sit amet, consectetur <a href="#lightbox-about">about us</a> adipiscing elit.
Donec massa lorem, elementum et mollis non, viverra a est. Proin nunc orci, tristique at egestas et,
interdum ac ipsum. Nulla <a href="#lightbox-more">more info</a> vulputate erat ac gravida. Mauris facilisis, leo ac condimentum commodo,
justo eros molestie dolor, a posuere orci tortor sed lacus. Suspendisse dictum, magna eu posuere tempor,
augue diam tempor lacus, sed hendrerit nulla ante quis justo. Aliquam eget tellus risus.</p>
<p>Proin sollicitudin <a href="#lightbox-more">more info</a>
elementum sem id pulvinar. Nunc vitae nulla nunc, at tempor nisi. Vivamus condimentum tempus auctor. Vivamus
aliquet lorem at mauris rutrum vitae molestie nunc hendrerit. Pellentesque condimentum metus sed mi euismod
lobortis id sit amet orci. Duis eros nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non
risus dignissim placerat et eu dolor. Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt.
Praesent bibendum sagittis elit, nec convallis enim tincidunt quis. Duis vitae risus sed ipsum varius volutpat
in in tortor. Duis nec est at mi condimentum consequat sed vitae metus. Lorem ipsum dolor sit amet, consectetur
adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur <a href="#lightbox-about">about us</a> elit. Donec massa lorem,
elementum et mollis non, viverra a est. Proin nunc orci, tristique at egestas et, interdum ac ipsum. Nulla
ullamcorper vulputate erat ac gravida. Mauris facilisis, leo ac condimentum commodo, justo eros molestie dolor,
a posuere orci tortor sed lacus. Suspendisse dictum, magna eu posuere tempor, augue diam tempor lacus, sed
hendrerit nulla ante quis justo. Aliquam eget tellus risus. Proin sollicitudin elementum sem id pulvinar. Nunc
vitae nulla nunc, at tempor nisi. Vivamus condimentum tempus auctor. Vivamus aliquet lorem at mauris rutrum vitae
molestie nunc hendrerit. Pellentesque condimentum metus sed mi euismod lobortis id sit amet orci. Duis eros
nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non risus dignissim placerat et eu dolor.
Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt. Praesent bibendum sagittis elit, nec
convallis enim tincidunt quis. Duis vitae risus sed ipsum varius volutpat in in tortor. Duis nec est at mi
condimentum consequat sed vitae metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div id="footer">
<p>Copyright 2009 Jenna Smith</p>
</div>
</div>
<ul id="lightboxes">
<li id="close"></li>
<li id="lightbox-about">
<div class="box">
<h3>About</h3>
<p>
Duis eros nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non
risus dignissim placerat et eu dolor. Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt.
Praesent bibendum sagittis elit, nec convallis enim tincidunt quis.
</p>
<p>
Duis eros nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non
risus dignissim placerat et eu dolor. Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt.
Praesent bibendum sagittis elit, nec convallis enim tincidunt quis.
</p>
<a href="#close" class="close" title="close window">x</a>
</div>
<!--[if IE]>
<div class="ie-bg"></div>
<![endif]-->
</li>
<li id="lightbox-more">
<div class="box">
<h3>More stuff</h3>
<p>
Duis eros nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non
risus dignissim placerat et eu dolor. Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt.
Praesent bibendum sagittis elit, nec convallis enim tincidunt quis.
</p>
<a href="#close" class="close" title="close window">x</a>
</div>
<!--[if IE]>
<div class="ie-bg"></div>
<![endif]-->
</li>
</ul>
</body>
</html>
Conclusion
This was just a bit of fun and is unlikely to be used in any real-world applications but hopefully it’s been an interesting read and you never know, someone might have actually learnt something from it!
So what now? Well, it would be great to see if anyone can come up with a better solution! If you have one, please share.
I’m planning to use a good portion of this in a real-world website :p I dislike JS and how IE likes to disable it, and this is an awesome solution. I took out the 100% width and the background color overlay because I’m using it as a pop up window type thing 😀
You could do this with javascript with 25% of the amount of code. Why bother with it this way?
To further my previous comment, has anyone else come across the mouse wheel scroll problem in IE?
It seems you can only scroll if the pointer is over the content, for example try hovering the pointer over a blank part of the page (i.e. not over text, links etc) and you’ll find that the scroll wheel doesn’t work.
I’ve found this in IE 6 & 8, so I presume would be the case in other versions of IE.
This is the last fix I need to overcome before implementing this on my site, so any help would be greatly received.
Kind regards
I guess just for trying makes this a great tutorial. There’s work to be done but, as I always say, everything is perfectible… NICE WORK!
Thanks for this great article, its just what I’ve been looking for. Has anybody else notice a mouse scroll wheel problem when viewing in IE 8?
I’ve found that it works sporadically, a fix for this would be much appreciated
WOW thank yooouuu sooooooo much ive been lookin for such stuff all over……such a life saver!!!!!!
fun example,i learead,thanks.
thanks for the tutorial!
Your article has way too much text and the unappealing layout doesn’t make us want to try to understand the code. You should take example on http://www.admixweb.com/2010/05/12/creating-a-bubble-coda-style-with-css3/
Thank you for the intersting post and helpful post. It provided the bit of script I needed to create an exit pop up. You can see the free exit pop up script I created at my blog http://exitpopupcode.com/free_exit_popup_script
Thanks buddy….. it helped me lot…… Nice post
My web design instructor put it to us to find a css solution to make a gallery. Seeing as I had absolutely no idea what I was (or am) doing, and the instructor wanted something that would actually validate, your solution proved quite elegant for me. I tweaked things here and there (the photos and captions in the lightbox were cutting off on smaller screens, but I kind of fumbled my way into a solution for that.
The only thing that didn’t validate in the CSS was the rgba value … so I pretended I didn’t see it and moved on.
I have asked people to look at my site and it appears to be working on Firefox and Safari, but not on Internet Explorer (does anything work on IE?). Apparently, the links aren’t working. I know you put in a fix for Explorer, so I’m thinking I probably blew it somewhere.
Anyway, thanks … the rest of the class gave up and did javascript galleries. I didn’t … which makes me better than them. Or more stupid than them. I just don’t know enough about web design yet to know which.
Thanks verymuch this will help me a lot thanks 🙂 just to let you know it doesn’t scroll either and you have to press the X (close) to exit it you can’t click on the outside like you usually can on some websites.Thanks
When i use my mouse scrool wheel… it slides the lightbox up and down. That does not look very nice.
Oops, the code didn’t show. I don’t know how else to send it. ):
I need assistance so bad ):
I did pretty much exactly what you said but this is what happens:
http://banjundrama.wordpress.com/2009/12/16/fhaluj/
Also, this is how I did it. I might be fully wrong. Please help me!
XHML and CSS Lightbox
html {
font-size: 75%;}
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;}
body {
background-color: #f8f8f8;
font-family: arial, helvetica, sans-serif;
color: #777;
text-align: center;
font-size: 1.0833em;
line-height: 1.6923em;}
a {
color: #09F;}
h2 {
font-weight: normal;}
p {
margin: 0 0 1.6923em 0;}
#container {
width: 100%;
height: 100%;}
position: absolute;
top: 0;
left: 0;
overflow: auto;
#header,
#content,
#footer {
text-align: left;
width: 870px;
margin: 0 auto;
padding: 40px;}
#header,
#footer {
background-color: #eee;}
#header h1 {
margin: 0;}
#header p {
margin: 5px 0 0;}
#content {
background-color: #fff;}
/* ———————————————————- */
/* LIGHTBOXES
/* ———————————————————- */
#lightboxes {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
list-style-type: none;
text-align: left;}
overflow: hidden;
#lightboxes li {
width: 100%;
height: 9999px;
position: relative;
background: rgba(0,0,0,.5);}
#lightboxes .box {
position: absolute;
width: 400px;
height: 400px;
left: 50%;
top: 50px;
border: 10px solid #999;
margin-left: -230px;
background-color: #fff;
padding: 20px;}
#lightboxes h3 {
font-weight: normal;
font-size: 1.8461em;
margin: 0 0 0.4583em 0;}
#lightboxes a.close {
position: absolute;
top: 20px;
right: 20px;
display: block;
width: 20px;
line-height: 20px;
text-align: center;
background-color: #ddd;
text-decoration: none;
font-weight: bold;
color: #999;
font-size: 1.2em;}
#lightboxes a.close:hover {
background-color: #999;
color: #fff;}
#lightboxes #close {
background-color: transparent;
z-index: -1;}
html {
overflow-y: auto;}
#lightboxes {
position: relative;}
#lightboxes .ie-bg {
background: #000;
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
filter: alpha(opacity=75);}
A valid XHTML and CSS Lightbox (no JavaScript)
by Jenna Smith
Click any of the links below to see it in action
Lorem ipsum dolor sit amet, consectetur about us adipiscing elit.
Donec massa lorem, elementum et mollis non, viverra a est. Proin nunc orci, tristique at egestas et,
interdum ac ipsum. Nulla more info vulputate erat ac gravida. Mauris facilisis, leo ac condimentum commodo,
justo eros molestie dolor, a posuere orci tortor sed lacus. Suspendisse dictum, magna eu posuere tempor,
augue diam tempor lacus, sed hendrerit nulla ante quis justo. Aliquam eget tellus risus.
Copyright 2009 Jenna Smith
About
Duis eros nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non
risus dignissim placerat et eu dolor. Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt.
Praesent bibendum sagittis elit, nec convallis enim tincidunt quis.
Duis eros nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non
risus dignissim placerat et eu dolor. Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt.
Praesent bibendum sagittis elit, nec convallis enim tincidunt quis.
x
More stuff
Duis eros nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non
risus dignissim placerat et eu dolor. Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt.
Praesent bibendum sagittis elit, nec convallis enim tincidunt quis.
x
I wonder if it shows! Please do help me (:
Thanks!
thanks a lot.. for giving simple idea
I think this is fantastic — BUT you said that you don’t think it would be used in a real-world project…why is that? What is the downside…seems like being able to get lightboxes which are convenient for users WITHOUT relying on javascript, which can be a hassle, would be perfect….
Let me know….thanks.
This is awesome! Great job.
I will try this. It’s very well explained, so I hope I won’t have any problems. Thank for sharing this .
I’ve used in a partner project. I hate to rely on javascript, even trough I master it.
So thanks a lot. Maybe I can use this as a fallback for a javascipt popup some other place
found a way to fix the scrolling problem in firefox (i think – well it works for me),
in the main style section change #lightboxes {…} overflow: auto; to overflow: hidden;
this is already set to hidden in the IE specific styling.
OMG, I has having so many problems getting a lightbox to work in Joomla. This would have been a perfect solution!
Thank you so much for the write-up!
This is a great alternative to Javascript! Great Work!
unexpected results in Firefox using the mouse’s scroll wheel. Whilst the browsers scroll bars will scroll the faded background content, the scroll wheel moves the overlay and black filter down the page :S
might try usin this for embedding flash video’s…
Thanks!
Did you really need the tags?
That was strong tag…
Awesome….. Im having a problem with a javascript overlay. Ill try this as a solution and let you guys know how it goes!
Thanks!
can someone tell me how to make textarea or text box hidden so as 2 use image on it…the way it is in this blog below “Have Your Say” form…if someone could give me some css links regarding it would be very grateful….tx
Hy Jenna, i tried implying your amazing CSS code in my college project, but due to lack of knowledge regarding css designing wsnt able 2 embedd it well and ended up messing it all…i needed ur help…if u r ready abt it please let me knw vl send u my project on ur personal email…tx…..:)
The keyboard navigation in the example page is very broken. Try tabbing through the page, for example. Also the focus management is non-existent, thus creating some serious accessibility barriers of perceivability, operability and understandability.
As is fairly evident, the ‘selling point’ of not using JavaScript is counterproductive here. It produces a much worse / broken solution with no way of repairing the damage — apart from using JavaScript.
“This was just a bit of fun and is unlikely to be used in any real-world applications but hopefully it’s been an interesting read and you never know, someone might have actually learnt something from it!”
The above quote was taken from the Conclusion of this article… It was just an experimental bit of fun, it was not created to solve the accessibility issues of lightboxes or to replace lightboxes.
I certainly wouldn’t use this solution for any of my projects as there are many issues with it, including those that you’ve mentioned =)
What was the Opera fix? I looked in the source code but saw nothing commented that helped me understand what you did.
Ah yes, sorry about that. I will try get some comments added to my code so that it is clearer!
wow, great !!! now i can make a simple lighbox without .js . i`m happy !!
An Opera fix has been added to the demo:
http://www.growldesign.co.uk/projects/lb/
There is a minor but irritating scroll issue though when you use the scroll wheel on a mouse. If anyone has a solution for that, please speak up =)
Wow, this comment box is huge, I feel i have to write some ginormous comment in here 🙂
LOL, I loved this post, and aside from the fact it is valid markup, it is simple solution to regular daily code. I will try to use this technique next time around.
tnx
I think I fixed it for Opera.
I sent the new html-code to Jenna to confirm it, but if you want to try it out by yourself:
http://www.3d4x.ch/temp/Lightbox.html
This is fab! Well done! I will update the demo.
Thank you =)
What a brilliant concept. The amount of Javascript-driven lightboxes on the net today is endless and tons of them are absolutely beautiful. To do it completely without JS though is inventive and well-executed. You now have portable lightbox that works regardless of whether or not the end user has Javascript enabled or not.
Nice Work!
Impressive, it works under all major browsers:
Firefox 3.5 Mac
IE 6
IE 7
IE 8
Chrome
It *does not work* however in FF2 Win & Mac and Opera 10 Mac.
I love this. Unfortunately it seems to kill the functionality of the back button in Firefox, because when you hit back, it goes to the previously clicked link… which is a lightbox, but it doesn’t appear when visited using the back button.
So, if you open 10 lightboxes, you have to hit back 10 times to get back to the previous webpage you were on.
Execellent!!!!!!!!
Nice 🙂
Sadly it crops the content on my iPhone.
Thanks you for sharing that. It works beautifully but it’s not cross browser.
flashgames
loan modification
Verry nice, THX for shareing it
Wow, this is by far the most elegant solution I have seen to date. Not having to include all kinds of javascript to work with a lightbox sure removes yet another layer of complexity, if not uncertainty, on the frontend. Congratulations on achieving such.
Nice work! I not found demo… 🙁
It’s in the second paragraph but here’s the link:
http://www.growldesign.co.uk/projects/lb/
Very impressive!
I did something very similar to this a while back using the :target psuedo class a few people have mentioned. http://www.thecssninja.com/xhtml/futurebox
Thanks you for sharing that. It works beautifully but it’s not cross browser.
I’m going to implement :target into my code (as others have suggested) and then hopefully we’ll have a fully cross browser solution! Will keep you updated =)
Excellent example, Jenna. Thank you.
Oopsie, the “z-index: -1” needs to be removed entirely from the .ie-bg conditional styling in order for the overlay to appear in IE8.
Also, a guy called Aaron has emailed to inform me of some IE6 bugs that I somehow missed (they’re pretty glaringly obvious bugs so no idea how I missed them). This is how you fix them:
1) In #lightboxes .box{…} add z-index: 1;
2) in IE-conditional #lightboxes .ie-bg {…}, change height: 100%; to height: 3000px; (or something really tall…)
…and THEN it will work fab in all browsers mentioned in the article.
Sorry about that folks.
P.S. The demo has been updated with these fixes!
Blown away! So simple, yet so spectacularly awesome! I can’t believe how simple it seems once it’s done. I’ve been trying to make something like this for quite some time now, I guess that adventure is now conquered. 🙂
For your information, similar articles to this one on how to create non-javascript lightbox:
http://similar-site.com/s.php?URL=http://carsonified.com/blog/design/css/how-to-create-a-valid-non-javascript-lightbox/
Hey Eric, the link is going nowhere
I can’t believe I never thought to make a lightbox sans javascript! Very nice idea.
My only unfortunate niggle is with how this affects the behaviour of the back button. I think users have become to familiar with usual function of the back button after using a lightbox link for this method to be totally viable.
Great experiment though. I like it 🙂
You can also use :target pseudo selector for a Javascript-free lightbox that ALSO works in Opera AND IE5.5+
http://www.studiomoh.com/fun/csslightbox/
For the records: The given example does work with my IE6, but it doesn’t work with my IE7 – no lightbox-layer will be shown.
Ok, totally blows my mind. This was a super awesome article and concept. I agree with some of the other commenters, it might be a little excessive for some projects, but the fact that it COULD be accomplished is the amazing part.
As far as Opera support….. oh, how I wish Opera would act like at least ONE mainstream browser, even if that browser were Win IE… LOL.
Absolutely love it!
It is indeed funny… Only very long…
This is a great concept, and looks great in Safari; however, I first tried it in Opera 10 and it was a no-go. Not sure why… I see other posters have also complained about Opera. With the weight of Webkit- and Gecko-based browsers against it (and even IE), I suppose this is a (very rare) rendering bug in Opera?
Yeah, I am aware of the Opera issue =(
You can try John Faulds solution in his comment above and let me know if it works for you too. I haven’t tried it yet.
Hi Jenna,
It’s an interesting thing. I like that example, it’s showed me a new CSS approach.
But in real world it’s not so useful, in fact it’s quite a hack because CSS should be primarily a styling tool. The first serious issue is that there’s no convenient method to scroll to the bottom of a lightbox that is taller than the window size and it has probably some cross browser compatibility bugs as well.
For progressive enhancement behavior and user interaction you should use JS which is designed just for that.
Useful reading here: http://www.alistapart.com/articles/understandingprogressiveenhancement/
Anyway bring us more experiments! 🙂
F.
Hey Filip,
RE: “The first serious issue is that there’s no convenient method to scroll to the bottom of a lightbox that is taller than the window size”
you can use style=”height: 100px;overflow:auto;” on the .box to solve this. You could also use a percentage for the height to ensure that it is in relation to the browser size.
If you don’t need to use javascript anywhere else, this method will be a great alternative to loading a a lightbox script – it’s also means you’ll use less bandwidth.
It’s a very neat experiment, but I think there may be a problem with keyboard accessibility. When tabbing through the links, I can open a lightbox but tabbing to the close link and activating it then leaves the focus somewhere at the end of the page. So I lose where I was when I opened the lightbox and have to shift-tab to get back.
I think this might be fixed if the close link were to link back to the original link in the text, perhaps by putting ids on the links in the text?
Impressive, Works on IE Mobile (Win Mo 6.1.4) Too (Yes, i know no one cares ^_^ ).
Works in Android browser too.
There’s no doubt that this is seriously impressive work, but with that said, I personally think the accessibility issue (which is what this comes down to) can be taken a little too far. Although I have no stats to back this up, the amount of people who will not have Javascript enabled in their browser of choice these days will be minimal.
But definitely nice as an experiment.
where you can see the result?
show not only the code, but the demo page – a good idea. skip the demo page – very bad idea.
Its in the 2nd paragraph
Here’s the link http://www.growldesign.co.uk/projects/lb/
Very slick Jenna. The only thing its missing is the ability to open files in it, but im sure an ajax call would make that possible.
Nice story………..But some part of the story had confusing ,but its good some thing new ican knows from the story.
Am I glad I found this blog post! I’d been linked directly to the example file, and it had melted my brain for a good 10min while I was trying to figure out how you’d achieved lightboxes without :active or :focus.
For a while there I was questioning how some plain CSS/HTML was beating me!
Very impressive Jenna, thanks for that 🙂
Lovely Jenna, thanks!
Unfortunately it breaks the back button 🙁 Just cycles through the previously opened Lightboxes until you get back to the start 🙁
I’d say that allowing you to cycle through the lightboxes is a feature. On a recent project I did I had to spend a lot of time getting my modal windows to be supported by the browser history. If I’d done it this way all that legwork would’ve been done for me.
First of all, just for the records,
It doesn’t work with FF2.0.0.20 on WinXP SP4
>> I’d say that allowing you to cycle through the lightboxes is a feature.
>> On a recent project I did I had to spend a lot of time getting my modal
>> windows to be supported by the browser history.
>> If I’d done it this way all that legwork would’ve been done for me.
I don’t agree… I mean…
Sometimes it could be true, sometimes not.
It depends on what the user is especting from interface.
for example when I click the back button from a normal blogpage
I expect to go back to the page I came from,
not to the previous image/content/media I watched from a link.
To be honest, I have never fallen in a web site that showed
or required the the situation you are describing.
So, I think the best solutions should be a combinations of parameters/constants that control this beaviour depending on what the web developer wants.
by the way… good job 🙂
I found that the back button in firefox 3.5 mac didn’t display the previous lightboxes. Safari did display them however.
Changing height to min-height on #lightboxes or removing overflow:auto gets it to work in Opera – kinda. The double scrollbars are still there either way (at least until you click on a link) but at least the pop-up boxes appear. Both changes produce the same double scrollbar effect in Firefox and Safari.
Oooh interesting! I’ll have to have a play with that later. Thanks!
Cool! I didn’t not that about #anchors. Something else to experiment with concerning #anchors is the
:targetCSS selector.Verrrrrrrrrrrry impressive!
Great work! You just made me happy 🙂
Awesome
It didn’t work for me in Opera 9.60 – can it have something to do with content not moving up in containers with overflow hidden?
Yeah, the article says that it only works in FF, Safari, Chrome, IE6, IE7 and IE8. Unfortunately Opera doesn’t work the same as the other browsers when linking to an element on the page. It doesn’t “pull” it into view if it’s off the page. There may also be other issues but I gave up testing Opera after I realised that and couldn’t find a work-around.
If anyone can think of a solution for this then please do let me know =)
I earlier wrote an article for showing/hiding content with CSS where I used pseudo-class :target. Downside is that :target doesn’t work on IE. But could that be the key for solving issues with Opera?
But very interesting approach, indeed.
how to make it work in Opera ?
Oops! my last post missed something it will be “SELECT elements in IE6”
Great post, I too try to find a use for this in my projects, my only concern though is IE6 and it’s infamous elements, I need an iframe shim for this 🙂
Cheers
Awesome
Facinating post Jenna. I’m sure I’ll find a use for it in a project!