Create a Lightbox effect only with CSS - no javascript needed
Posted by Emanuele Feronato on 08/22/07 in Css
You may call it Lightbox, or Greybox, or Thickbox, but it's always the same effect.
When you are on a page, and click on a photo or trig some event, a Lightbox is an effect that fades the pagein the background to show you new content in the foreground.
I mean this effect
In the upper example, when clicking on a photo the site fades to black and shows the photo, in the lower one when clicking on "login" the site fades to white and shows the login form.
There are tons of Lightbox scripts in the web, each one with its unique features and limitations, but all require massive use of Javascript or the installation of javascript frameworks.
In some cases, there are "lightweight" versions with "only" 40KB of Javascript.
This example does not want to compete with those scripts, but if you are looking for a simple, 100% CSS, 0% javascript lightbox, this may help you.
Features of this Lightbox:
100% CSS as said
You can insert any content in it (some scripts out there only allow images)
That's all. Did you need something more? Think wisely...
Let's start with the CSS
-
.black_overlay{
-
display: none;
-
position: absolute;
-
top: 0%;
-
left: 0%;
-
width: 100%;
-
height: 100%;
-
background-color: black;
-
z-index:1001;
-
-moz-opacity: 0.8;
-
opacity:.80;
-
filter: alpha(opacity=80);
-
}
-
-
.white_content {
-
display: none;
-
position: absolute;
-
top: 25%;
-
left: 25%;
-
width: 50%;
-
height: 50%;
-
padding: 16px;
-
border: 16px solid orange;
-
background-color: white;
-
z-index:1002;
-
overflow: auto;
-
}
The black_overlay class is the layer that will make the web page seem to fade. It's a black 80% opaque background as long and wide as the browser that will overlay the web page (look at the z-index) and at the moment is not shown (look at the display).
The white content class is the layer with the photo/login screen/whatever you want to appear in the Lightbox overlay. It's a white layer to be placed over the black_overlay layer (look at the z-index, greater than the black_overlay one). The overflow allows you to have a scrollable content.
In the html file, put this line just before the
tag this
Ben | Aug 22, 2007 | Reply
Erm… no javascript? That title is very misleading. It’s a nice concept, and a good lightweight alternative to the libraries that are out there, but there is definitely javascript involved, and it’s non degradable.
Izzy | Aug 23, 2007 | Reply
Yes, the title is misleading… maybe somthing more like “Lightweight lightbox with CSS”, seeing as there are atleast two lines of javascript… and maybe 75% CSS, 25% Javascript would be a more appropriate range.
A fantastic bit of code though, almost as good as some scripts I have seen, however, it doesn’t have a smooth fade, which could be added by having two darkening divs each on say 40% opacity, one opens on the click and the other on the loading/displaying of the lightbox perhaps… not sure how to do that myself, but I’m sure it can’t be too javascript intensive.
–Izzy
Sigh | Aug 23, 2007 | Reply
Don’t you get it? By ‘no Javascript needed” he means “not that many Javascript needed”! Sheesh. By the way, the lightbox was great…
Live TV | Aug 23, 2007 | Reply
Ok well it does use JavaScript, but give him a break it’s still pretty good and maybe the title should have been “Create a Lightbox Effect with CSS and a tiny bit of JavaScript” but that probably wouldn’t have sounded as good.
Kyle Fuller | Aug 23, 2007 | Reply
The title says “no javascript needed” yet there was javascript. This is misleading, maybe you should change the title. Still it is good, very little javascript instead of most of it javascript.
um | Aug 23, 2007 | Reply
Most of the JavaScript effects also include many other options, such as automatic sizing, etc. ALL of them use CSS. How this got on Digg I have no idea.
velinn | Aug 23, 2007 | Reply
He did make a mistake with the title, but I think what he meant was that there is no Javascript framework necessary. Think Prototype, script.aculo.lus, etc. Some of these weigh in at almost 300k.
Using two lines of standard javascript isn’t quite the same thing.
Russell Heimlich | Aug 23, 2007 | Reply
The main lifting of the Javascript is to manipulate class names. You just did what all of the other lightbox scripts do but yours is less bang for more buck. Good try though.
I’ve been working on a custom lightbox script at work although it is more of a modal pop up since we don’t want the in-your-face fade down. Just a quick “display:block” that turns on and off a div holding the folder positioned absolute.
Eryx | Aug 23, 2007 | Reply
Great script! Simple and effective. what is the -moz- in your css? I know it is for Firefox but is it a way to comment?
Foo | Aug 23, 2007 | Reply
in mozilla, you could add a :hover class, and it would work without js. might be a little hard to use, though.
Sashidhar Kokku | Aug 24, 2007 | Reply
I tried using this sample for a form based webpage.
If I use a server side button, and a click-event handler for it will close it irrespective of any other action.
This implementation of the lightbox is good for a static (display only) webpage.
Good job though.
-Sashidhar Kokku
Andreas Blixt | Aug 24, 2007 | Reply
Yeah it’s definitely not CSS only. It IS possible to make a dynamic lightbox in 100% CSS, but it will be lacking fundamental functionality. I made the following example:
http://css.mezane.org/lightbox/
Click the thumb for the lightbox effect. Click outside to close it (this does not work on Safari because it doesn’t seem to pick up on :focus or :active pseudo-classes.) This can be expanded upon to not reuse the image in the document (you’ll notice it disappears while the lightbox is open,) but I made the solution completely degradable (otherwise there could be a second image that’s hidden in the CSS and then shown when needed.) The extra span element is undesirable as well and makes the source code look ugly. I don’t recommend this anyways. A CSS-enabled browser with JavaScript disabled (very rare) will simply have to live without lightboxes.
Clint | Aug 24, 2007 | Reply
This won’t work if the page has to scroll, man. You need to display this stuff ‘fixed.’ And it’s not very practical with your 25% sizing; images would not be vertically centered.
Thing is, I think you know that, which is why your example is so simple. And if you want someone like me to donate, make a more robust example that works and I’ll consider it.
Tyler | Aug 24, 2007 | Reply
Yeah, you should change your title for this post. But your getting a lot of traffic from it so I cant blame you.
Andrew | Aug 24, 2007 | Reply
You’re just revisiting the days when people didn’t bother to make javascript unobtrusive like they should. This is a step backward, and it encourages other people to take a step backward (or more likely, to not take a step forward). This is the opposite of a contribution.
willie | Aug 24, 2007 | Reply
Ach, quit yer whinin’, ya bunch o’ babies. It’dunna use JavaScript.
Kris | Aug 24, 2007 | Reply
Not good.
1.) It requires javascript to be enabled (this means non-degradeable), it means that the image will not be seen if JS is disabled.
2.) Why would you want to do this for every object you want to include in a lightbox.
here
Close
When you could just include any of a number of well tested libraries and just do this.
lightbox
If it’s size your concerned about I recommend looking into slimbox it uses the mootools framework and is under 7k.
Rawstock | Aug 24, 2007 | Reply
How about “Lightbox with css and inline javascript only”?
Blake Brannon | Aug 24, 2007 | Reply
Not totally free but reduced. Nice work here. How about “Lightbox effect with virtually no javascript”
c | Aug 24, 2007 | Reply
How cross browser is this technique though?
Cadu de Castro Alves | Aug 24, 2007 | Reply
Hi, Emanuele.
I improved your technique. I removed all inline JavaScript and wrote unobtrusive JavaScript code. It works very well in Firefox and IE7.
To make this technique more flexible, I included a function called getElementsByClassName, created by Jonathan Snook.
See the example
Magic Weaver | Aug 24, 2007 | Reply
Geez… what a dup. I came here thinking it was 100% CSS but only to find it still involved JavaScript.
Admittedly though it is a nice light weight idea and an alternative to the more fanciful version (lightbox, thickbox, greybox, etc.) out there, but there is a significant difference between this version and the fanciful versions, this CSS version has no graceful degradation should for some reason the client doesn’t have JS turned on or (heaven forbid) a JS incapable browser.
Still I commend you on a good try, but the next time you come up with something, try not to mislead with your titles.
anon | Aug 24, 2007 | Reply
I’m going to go against the flow and say the title was accurate. No javascript was needed for the lightbox effect. You do need javascript to trigger the effect.
Good work, I’m going to use this.
faben | Aug 24, 2007 | Reply
no javascript? Your a dumbass, your example is exactly how most greyboxes occur.
Max | Aug 24, 2007 | Reply
I will have to try it out, but that is definitely my biggest frustration, I cannot stand cross browser incompatibility. Has anyone tried to see if this works well in IE, firefox, safari, and opera?
–
Max … Out!
http://www.cmyos.com - free online operating system
Tom Howard | Aug 24, 2007 | Reply
Close but no doughnut.
Here is a real “no javascript” lightbox example
Gopinath M | Aug 24, 2007 | Reply
I’m searching for this script on net for long time. It’s very simple and superb. You are genius(in case if you have written this). Thanks a lot buddy :)
Cheers
http://mgopinath.blogspot.com
Mat | Aug 24, 2007 | Reply
Andreas Blixt > Your CSS lightbox effect doesn’t work with Opera 9.2 browsers.
Misleading title but good work.
Thank you
Dusan Smolnikar | Aug 24, 2007 | Reply
I don’t know how other alternatives work, but I was working with a lightbox very similar to yours lately. With one difference, I had a few select fields (<select>) on my page, which seemed to overlay everything in ie (ie6 for sure, but I think ie7 as well). They would display over the .black_overlay and .white_content. The only solution I could find was to put an iframe under white_content, which is quite ugly and still wouldn’t fix selects displaying over black_content.
Has anyone else had a similar problem and found how to avoid it?
Ingus | Aug 24, 2007 | Reply
If we don’t look at the misleading title there are some serious problems with the code:
1) if you add more content to the sample page and need to scroll down content and see the box in the scrolled area, you can’t because the absolutely positioned box is above the visible area. And despite the fact that you open it, the visitor does not even notice it.
2) if you open the box and there’s enough content, you can scroll away the box.
I prefer jQuery with a modified jqModal plugin.
10668844 | Aug 24, 2007 | Reply
works great, thanks!
Moby | Aug 24, 2007 | Reply
The “onclick” event is a DOM event. It may call JavaScript, or some other sort of scripting language that may be available to the browser. It may also access DOM attributes and modifiy them, as in this case. But is not necessarily JavaScript.
http://en.wikipedia.org/wiki/DOM_Events
sazwqa | Aug 24, 2007 | Reply
well had tried similiar things in the past, but not a foolproof option though. Lightbox and other scripts handle modal window professionally and a far better way, have no issues with almost any browsers and scroll thing.
I think geeks cud use this script for showcasing but for hard-core wannabes its a sure shot NO !
~sazwqa
Sam Liddicott | Aug 24, 2007 | Reply
href=”javascript:……
is a wicked sin.
It should be
href=”image.jpeg” onclick=”……; return false”
So if no javascript, folk still get the image.
fLUx | Aug 24, 2007 | Reply
VERY nice, so nice in fact I’ve started to incorperate it into a site I’m building:
http://muuveee.com/img/muuveee_login_box.gif
(I would give you a link to a real demo, but its only currently on my localhost/devbox ;)
When somebody clicks the “Login” link, up pops the box, click out of the box, it goes again, sweet! ;) and I’ve make it into an element using the framework I’m building, so where ever I need a login link, its ready for me in ~10 characters! =)
10/10, simple, easy, and quick! Cheers!
Ozh | Aug 24, 2007 | Reply
Not only your technique DOES use javascript (hell, the *first* thing you gotta see on your example is a link pointing to javascript:void() !!) but it is not even usable with javascript turned off, which is what alternatives are exactly good at.
Honestly I don’t see the point of this.
Godspeedphi | Aug 24, 2007 | Reply
1) This lightbox method uses CSS
2) This is not new
3) i just wanted to list 3 things
Simon | Aug 24, 2007 | Reply
Yeah, Very misleading, it blatantly uses javascript to show the box, so it is pointless.
You might be able to get the same effect working by using different overloaders for a:hover and a:visited to get the same effect, but I think the point about the javascript ones were that they do not necessarily load the content until requested, so save bandwidth that way - doing a full CSS option would negate that.
Sean O | Aug 24, 2007 | Reply
Another vote for _Misleading title designed for linkbaiting_.
“No javascript” means… no javascript. Especially not inline, obtrusive javascript.
@Tom Howard:
No donut for you either as your linked example is worthless if it doesn’t work in IE, like it or not.
Aaron | Aug 24, 2007 | Reply
You are using JavaScript, fool!
Raspu | Aug 24, 2007 | Reply
I haved made exactly the same by my own a few days after visiting this website… =P
Jeremy | Aug 24, 2007 | Reply
Doesn’t work right in IE with XHTML transitional doctype
Leo | Aug 24, 2007 | Reply
*yawn* This is what happens when the person first discovers the idea and starts playing with it. Later you will discover why your implementation is too limited and won’t work in the real world for big web sites. It doesn’t handle IE select bug. I am 70% sure it will break on pages with scroll bars, or will only work OK on some browsers but not the others when the scroll bar is up and the user scrolls the page.
To get this just right is not that easy. Even a big popular site like reddit.com has a very crappy lightbox. You can scroll down once it appears and click on the page below.
I actually implemented a lightbox that is more or less bulletproof, but obviously it’s not as lightweight as yours. The idea is that not all javascript is evil. Some of it comes from the fact that you know about web development and are covering more use cases. Just because there is some javascript doesn’t mean the person is just adding bloat. I’m amazed this actually got upvoted so much on digg, since it’s an amateur attempt.
dancecommander | Aug 25, 2007 | Reply
0% javascript. um no. those code samples you have labeled ‘HTML’ contain pleeeenty of javascript. cool trick through for sure. it does not degrade naturally… yikes.
Jimmy | Aug 25, 2007 | Reply
How do you do this w/ 2 links and want it to display 2 different items
Ex. link 1 will display 1 item, and link 2 will display 2nd item.
Thanks,
Jimmy
Trevor Haagsma | Aug 25, 2007 | Reply
Hi there, very nice post, but im having a problem implimenting it on my website in currently building, it only displays the fade effect on half the website, I cannot get it to cover the full site… is there a solution at all to that or is that the lack of CSS??
Ron Later | Aug 27, 2007 | Reply
I’m a user not a creator and I rarely comment on other people’s work in a negative way but:
I have seen very similar years ago when I played around with animated emails.
I was impressed with such things then but now I’m not, the average user doesn’t care how effects are created or I suspect even notice them.
Tom Howard | Aug 27, 2007 | Reply
@Sean O:
I agree it’s useless for real life use, but it’s meant to be a proof of concept to demonstrate what can be done with JS alone. I could have compromised and simulated :target in IE using JS, but that would have defeated the whole purpose of the demo.
Ryan | Aug 27, 2007 | Reply
Bullshit you liar. Hehehehe!
scancode | Aug 28, 2007 | Reply
I really liked Andreas Blixt’s ligthbox… 0 javascript… yours is cool too, but the I thought NO JAVASCRIPT NEEDED meant NO JAVASCRIPT NEEDED. Good job anyway, you got your cookie!
charles | Aug 28, 2007 | Reply
I don’t know if anyone else mentioned this, but when I cross browser tested the code, there is a white strip on the right hand side of the browser in IE6 for PC. It is an easy fix though, just change the body tag to:
…then it works fine in IE7, IE6, Firefox and Safari!
I also noticed some issues with centering/scrolling in some browsers, a minor problem, however It may be worth checking out!
Thanks for contributing your efforts, Ignore all the negativity, keep hacking away at the problems (and please change the slightly-misleading title)
Good work….
Thanks
-Charles
charles | Aug 28, 2007 | Reply
Ah…
I just noticed no one can see thee code I included, I forgot about the “html injection prevention” most sites have, anyway just add a margin of 0 to the left, right, top and bottom for the body tag…
-Charles
Josemi | Aug 28, 2007 | Reply
Thanks, it works!!! i’m going to use in many sites!!!!
Steve | Aug 29, 2007 | Reply
very nice, still needs javascript but nice and light and does the job. Good post
Tippi | Aug 31, 2007 | Reply
This is nice, i tried to write something like this without the scale and fade-in effect but got the the problem to cover the whole screen with the 80% layer. However you seem to have it worked out and very lightweight to, this for sure will come in handy since im sick of the fade in stuff that takes 2-3 seconds per image to scale and fade and AHHHH!
Thanks :D
Tony Cai | Sep 1, 2007 | Reply
Hi,
Awesome work, for those of you who wants to see it working in a real functioning website. See mine! It has made my site that much more pretty on the eyes!
URL: http://www.sbuguide.com/
CLICK ON THE CONTENT BUTTON.
If you make the boarders and padding smaller, the box looks more centered. I have mine at 5px.
Tony Cai
http://tonycai.com
c grigore | Sep 10, 2007 | Reply
check here
http://tanny.ica.com/ICA/TKO/test.nsf/suckerfish/examplefix3.htm
it seems that the selectbox is hidden.
Andrés | Sep 12, 2007 | Reply
Great! That’s what I was looking for!
Dan | Sep 21, 2007 | Reply
Give the guy a break! So maybe it isn’t 100% perfect for every single browser and its not 100% js free, but it is only 2 LINES!! Compared to many other solutions, this is f**k to achieve a nice effect that has many applications. If you need more functionality or cross compatibility then use another solution.
People should appreciate the fact that guys like Emanuele are prepared to actually share their experiences with people.
Makis | Sep 22, 2007 | Reply
Hi guys,
Based on your work I created a lightbox to load a flash file. I call is SWFbox - you can find it here:
http://www.makesites.cc/programming/by-makis/swfbox/
If you can make further improvements on it please be my guest.
yook | Sep 23, 2007 | Reply
Looks like all the Javascript does is turn the display: none into display:block for both divs. You could easily do this with PHP instead of javascript. What I did was just keep display: block in both classes and when I want the lightbox, just dynamically include the divs on the page with PHP.
Or if you really want just a 100% CSS solution.. you could just link to static pages with the lightbox divs coded in. Doubt people would even notice.
Rafael Vale | Sep 25, 2007 | Reply
Thanks a lot bro! Congrats, its really clean and better than lightbox.
Revathy | Sep 29, 2007 | Reply
Superb….Very Useful too…
Dale Hay | Oct 1, 2007 | Reply
I agree, a bit miss leading on the title considering I see a bit of Javascript. :p
Aaron | Oct 11, 2007 | Reply
I’m mexican, and I would like to thank you for the guide to make the efect, I’ve been searching an other like this but in your site is that I need for my page. Excellent!!!
If you have a pdf tutorial or something like that, where I can learn the css language could you send me by mail please??
Thank’s a lot, very nice!!!
Sorry for my English it’s not very well
Chad Wagner | Nov 10, 2007 | Reply
I just implemented this and loaded some content via a prototype ajax request, and it functioned perfectly!!!
Thanks, I have never found such a simple lightbox, and this is it!
RFarce | Nov 15, 2007 | Reply
Implemented and lovin’ it. The title “no javascript required is spot on”. It didnt require me to code any javascript at all…..copy and paste. Alot easier than those other libraries which need to be configured.
foysal | Nov 18, 2007 | Reply
Thank you very much.
Tim Connor | Dec 1, 2007 | Reply
WORST, LEAST degradeable JAVASCRIPT lightbox I have seen in quite a while. If you are going to go that ugly inline approach, at least keep the href pointing to the image and add an a return false to the end of the onclick. And you are adding the same kilobytes, just manually to your html, where it can’t be cached just once in a js file.
And the title is false, a blatant lie and misleading. It’s fine for those of us who know better, but for the noviates it’s aimed at…. Basically this is bad google baiting/trolling. I assume the author knows this too, based on the good google results for “css no javascript” posts get and the out going links to a commercial site.
lunakizz | Dec 7, 2007 | Reply
thx a lot!! It’s really useful
Alan | Dec 9, 2007 | Reply
Hi to everybody!
I just want to say that I did an adaptation to call lightbox v2 from flash movies, if you want to check it go to:flash lightbox v2
Good work!
Alan
Lord XeöN | Dec 12, 2007 | Reply
Hi, every body :-)
Thanks a lot for that nice solution : very simple and efficient :))
So long…
Michael | Jan 3, 2008 | Reply
This is just what I was looking for THANK YOU for making it available to the public!!
Michael
Palani Samy | Jan 4, 2008 | Reply
Thank you very much for this script. I have been searching for this script about 5 hours. Finally i got a right script over here.
parsi | Jan 5, 2008 | Reply
I tried your lightbox, but it sits under my flash header… that means the flesh header is covering up the box. I think this have something to do with z-index in css but as I can see it is set up on 1001, so I guess there is no point of putting higher number. :) Does anybody have similar problem or solution for this?
gagle | Jan 21, 2008 | Reply
>parsi
Add to FLASH param:
css webdev | Jan 24, 2008 | Reply
Hello,
very cute little thingy, will try to replace those javascript intensive lightboxes.
Nice work!
Brian | Feb 1, 2008 | Reply
You guys are so outa ir - This guy makes up sum thing which u can use FREE. Dont dis him and dont compain. he is not chargin u to view it. And plus the concept can be easily improved.
Think a bit
justin | Feb 3, 2008 | Reply
wow you guys bitch alot… why even bother posting anything if you guys are so damn quick to jump down the dude’s throat.
silencio | Feb 3, 2008 | Reply
@Brian, well, except he’s trying to improve on what were improvements on this original idea he apparently considers too bloated and on top of that feels the need to exaggerate a claim that is not true. e.g. Slimbox plus dependencies (mootools) weigh in at a lovely 26kb, is feature filled, not as glitchy, definitely gives off the polished look, and degrades nicely. Uses mootools, but will it kill you to use a javascript framework that (for slimbox) weighs in at 19kb? Also, what’s with the big concern over size..after all, one of the more popular uses of this particular technique is for displaying..oh, images. I highly doubt those images would weigh in at under 26kb, so if it makes so much of a deal to your end users who are all on dialup or something (i mean, look, you might even save some bandwidth in the long run as they get cached)…
I think most of the grumbling is coming from the crowd expecting 0% javascript and seeing inline javascript only after beginning to read this post, and not even a good example of what the author was trying to illustrate. It was a waste of time, that’s why everyone’s complaining. :)
Also I might point out that pretty much all of the Lightboxes out there are also “free”, and that the author comes out pretty strongly against pretty much all of them on the basis of being bloated/unnecessary/using frameworks..you know, also known as complaining. Soooooo…
Tom-cat | Feb 4, 2008 | Reply
The script is cool and pretty simple. I was just wondering how or if I could implement that same code in the following example:
I want the page 5list.htm to be the white content
on page load. I dont want someone to have to click on it.
Like if I go to http://www.ww90990.com as soon as the
page comes up, I want the white content to load with the black overlay.
Can you tell me what code I would use instead of onclick. The exact code, if you will. Because I am using onload, but it is just not working right.
Any help and assistance would be great.
Thanks
solitario | Feb 10, 2008 | Reply
I think this is great. I’ve been looking for a barebones lightbox script that i can customize. thanks.
Digg Sucks | Feb 10, 2008 | Reply
Anyone else think that Digg traffic is inherently useless?
uttam | Feb 23, 2008 | Reply
Thanks…..
It working fine in mozila but in IE i am facing problem.
There is another divs in my page. it dosen’t get overlap.
Ricardo | Feb 28, 2008 | Reply
Great!!!!
simple and efective
R i C H a r D | Feb 28, 2008 | Reply
great it works
Josh | Mar 15, 2008 | Reply
Just curious, how would to go about making the blacked out layer 100% of the webpage, instead of just the size of the screen? i used this on a page that was longer and if you scroll down the black div just ends..
rep | Mar 16, 2008 | Reply
You answer to parsi was cut off. What was you solution to the Flash problem parsi hand?
Thanks in advance.
>>> I tried your lightbox, but it sits under my flash header… that
>>>means the flesh header is covering up the box. I think this have
>>>something to do with z-index in css but as I can see it is set up
>>>on 1001, so I guess there is no point of putting higher number. :)
>>> Does anybody have similar problem or solution for this?
>>>
>>>gagle | Jan 21, 2008 | Reply
>>>
>>>>parsi
>>>
>>>Add to FLASH param:
dewaji | Mar 22, 2008 | Reply
Very nice tips. And theres no mootools or something heavy. I like this much. Thanks
lol | Mar 22, 2008 | Reply
cuz i digg it
Izzy | Mar 23, 2008 | Reply
it would be much better if the position of both the black_overlay and the white_content was set to “fixed” instead of “absolute”. This means that you don’t get Josh’s problem where the black overlay runs out if you scroll down.
If you leave the white_content’s position attribute as absolute, you can make the shade stay there, but the white_content stay where it is and scroll off the screen.
Hope this helps someone!
Izzy
Scott Elliott | Apr 4, 2008 | Reply
The problem here is that if you use the javascript the end users can get a warning that turns them away from the site. No means No not oooooh a little bit’s OK.
Nice effect bad title
lupu.slobodu | Apr 4, 2008 | Reply
superior work, elegant, the best out there man
nealc | Apr 11, 2008 | Reply
Hey, I tried the lightbox on a new site design, but I can’t get it to work where there is more than one image being clicked, with a different image per thumbnail–they all share the same pic. How can I make it so I have multiple images (like 14 or more) on a page, with different respective counterpart images in the lightbox?
ronnie | Apr 15, 2008 | Reply
Give the man a break. Who cares if their is some JS. Its a great alternative.
wheres me jumpa | May 5, 2008 | Reply
mmmm title is misleading, however it was just what I am after. Tip of the cap kind shrew.
Snark | May 6, 2008 | Reply
Thanx for this very best ModalBox on Planet!!! Work perfect on Windows XP/2000 with
IE 5.01(!), IE 5.5, IE 6, IE 7, Opera 7,8,9, Safari, Firefox, Netscape Navigator
Only old browser can not realize the opacy filter function, but the box have correct porsition and size with a black background! Perfect!
Namastey
Snark
Snark | May 6, 2008 | Reply
Activate opacy on Linux systems with Konquerer
Add on CSS:
-khtml-opacity:0.7;
Ab | May 15, 2008 | Reply
What a bullshit article. I guess the author does not understand what “percent” means.
This is not 0% javascript.
elf boy | May 17, 2008 | Reply
So I put a video in the box, and that works fine, except for when I close it. After I close it, the sound continues to play. Any help?
steve | May 19, 2008 | Reply
yeah I think we have now clarified that it does use a ‘tiny’ bit of javascript but whatever…
…can someone help me out on how to make this work if the page scrolls??? clint mentioned something about using ‘fixed’ display…any comments welcomed!! At the moment it would appear to only fill the screen dimensions anything else does not get covered by the black box???
Eqqy Designs | Vancouver | May 21, 2008 | Reply
Nice little script you got there. Sure it needs some javascript, but hey, this is still an alternative form of lightbox.
Thanks for sharing!
jai | May 27, 2008 | Reply
maybe it doesn’t even matter if there is javascript or not! just a line or two it still works doesn’t it? all you who don’t appreciate how amazing this is for me! i think i’ll put this on my website its so amazing!
jai | May 28, 2008 | Reply
Does this work for multiple Lightboxes? (not at the same time, just different links on a page to open a lightbox with different content)
alastor | May 29, 2008 | Reply
@Tom Howard:
BIG donut for you!!!
if your PoC could degrade in IE to thumbs that point to larger versions opening another window it would be perfect, and is what we should do from now on, design for sane browsers and degrade to IE (in a ugly way! consistent with an ugly browser).
AnonaMe | May 29, 2008 | Reply
Sorry if this has been addressed already…i didn’t feel like reading the thousand comments that complain about the F’ing title.
Forms with select options underneath the lightbox show through in IE. Firefox works great for what i’m trying to accomplish…any idea’s on addressing the select in IE tho?
AnonaMe | May 29, 2008 | Reply
yes it does…just give them different id’s ex.
#
This is the lightbox content. Close
#
#
This is the lightbox content. Close
#
weilin | May 30, 2008 | Reply
Wow cool!
Marcelo | Jun 1, 2008 | Reply
Exactly I was searching for my login page! People sometimes forget to keep things just simple.
Gus | Jun 13, 2008 | Reply
greta, the css is not valid :/ ….
Kirsten | Jun 26, 2008 | Reply
Man, people are such whiners!
As someone who was asked to implement a simple lightbox for her organization’s site, and isn’t very comfortable with JavaScript, I’m very grateful that you created this and shared it with the world. The amount of JavaScript that there is or isn’t in what you published is perfectly fine with me. The JavaScript required for a “real” lightbox is over my head, but I think I’d be able to implement this. Thanks!
John Masone | Jul 1, 2008 | Reply
I got this code working pretty easily with an iframe instead of a div. BUT the last issue I seem to be having is, the “lightbox” is always the size of the browser window, but its always at the top of the page, even if the page is scrolled somewhat when the initial link is clicked. Is there someway to change this behavior? So that the lightbox (and blackout) are always centered on the browser, at least the browser as it is when you click. ?
Peter | Jul 1, 2008 | Reply
Suggest if you use position: fixed in both classes the lighbox and overlay will remain stationary when scrolling the page.
Unfortunately this only works in IE7 when using Strict DTD