The Kansas-City Star newspaper has these really cool Pop-Up Windows.
If you go to this link and click on the picture of Andy Griffith (the old guy) you’ll see what I mean.
I am on my MacBook and using FireFox 3.5.11
Thanks,
TomTees
So if I wanted the same end result, what would be the best way to attain that and still have it be cross-platform and cross-browser friendly?
(There seems to be several opinions/approaches suggested.)
I personally found the way the Kansas City Star does their pop-up to be simple and aesthetically pleasing.
TomTees
You can do it with CSS only but it depends on either the :active pseudo-class or the not-so-well-supported CSS3 :target pseudo-class. Both methods require a lot of extra CSS and do not offer much flexibility at all. For example, to have three different lightboxes you’d need three different lots of HTML for them, with different CSS for them too. With a very small amount of JavaScript you can make it practically CSS-only, but only in modern browsers (IE6 no question, IE7 perhaps).
You cannot do a dialog/modal with css only. You can however do a tooltip with css.
There are many jQuery modal plugins. I prefer nyromodal as it covers most of what I need to do. Although you may download a customized version of the jQuery UI for your specific project that will include resize, drag and other options.
EDIT: WOW! 32 scripts on that page! yikes.
Looks like they are using thickbox. Google it and you’ll find it.
look up “lightbox”
This has been a nice conversation and there are lots of nice examples, however, no one has truly answered my question…
I wanted to know how the Kansas City Star created their specific pop-up window in this article.
Some key things to notice in that link…
1.) When you click on the link it does not dim the entire screen and/or background
2.) You don’t get some gaudy looking “X” all the way in the upper right-hand corner of your screen
The things I like about what the Kansas City Star did is that…
1.) The background is not darkened
2.) The “controls” on the pop-up are barely noticeable and thus do not distract like most of the examples posted here
3.) All I have to do to close the pop-up is hit “ESC” on my keyboard, which means my hands never leave the keyboard. (It is a pain in the **** to have to mouse all over the place, and that is a main reason users get annoyed by pop-up windows. They slow you down having to click all over the place?!)
4.) The box borders and control text is a nice light grey and again it does not distract from what is important —> the content!!
So, does anyone know how to easily mimic what they did in this article and have it be cross-platform/cross-browser friendly (except for aybe IE6)??
Thanks for all of the input, but I’m being pretty picky on this one. :angel4:
TomTees
In all of my browsers, FF, IE6-8, Safari, it opens in a new tab. Not in a dialog/modal.
EDIT: D’oh! I was clicking on your initial page and not the secondary page link. My bad. BTW, love KK, she’s hot but you might want to warn peeps at work looking at your examples. haha
Just go through all these and find the one that matches. Then follow the directions. http://www.designyourway.net/blog/resources/30-efficient-jquery-lightbox-plugins/
Why do you keep saying that? It works perfect!
I thought you needed JS to open a popup/modal?
Tom, simplemodal is a nice clean, small jQuery plugin that will work. When I was researching modal scripts I tried it out. Works cross platform/browser and even IE6.
I can’t think of a way that they would do that. :focus and :target do not have that power.
when I try these examples they just open another tab. No popup. Am I missing something?
learn something new everyday. That’s what I love about this forum. 
It’s a modal window. This is typically done using some sort of JavaScript, it looks like they are using jQuery. I think that I’ve seen a similar technique using only CSS, but I can’t remember off the top of my head where.
Hope that helps.
Yep, that’s alas because IE6 doesn’t support CSS3, but for modern friendly browsers you can get a lightbox with just CSS (hooray for the target selector)
the demo provided initially in this thread didn’t work at all. Alex, yours works nicely. Didn’t know you could do that.
It is buggy in IE6 though.
Curious though, you are using javascript. Is that for the modal?
no longer supported means the developer has ceased to continue development. It will work for now but it may break with future revisions of jQuery.
Honestly there are plenty of others out there that do the same thing and are still current. Check Eric’s link for other plugins that have similar functionality.
If and when I choose a plugin I ask these questions.
Is it easy to maintain/update?
Does it have good documentation and support?
Can you easily edit/configure it to look and behave the way you want it to?
I wasn’t sure since the demos didn’t look exactly like the one I wanted.
It is a jQuery plugin. However it appears it is no longer supported.
http://jquery.com/demo/thickbox/
What do you mean by that?
The company or project is going out of business?
Or it is no longer supported by browsers?
The CSS examples provided are a nice, clean alternative.
Most of what you are looking for can be done/adjusted with any of the jquery modals out there. Again, the two I’m familiar with are nyroModal and simpleModal by Eric Martin.
I agree in that I like CSS.
Maybe I can play with them and see if I can tweak them more to my liking?
TomTees
Tom, I told you in a previous reply that they are using thickbox. It is a jQuery plugin. However it appears it is no longer supported.
http://jquery.com/demo/thickbox/
May work now but also has the possibility of breaking with future jquery releases.
The CSS examples provided are a nice, clean alternative.
Most of what you are looking for can be done/adjusted with any of the jquery modals out there. Again, the two I’m familiar with are nyroModal and simpleModal by Eric Martin.
Really? Please feel free to explain how I did this for a demo on Six Revisions then