SitePoint Sponsor

User Tag List

Results 1 to 23 of 23
  1. #1
    SitePoint Evangelist TomTees's Avatar
    Join Date
    Apr 2010
    Location
    Iowa
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Nice Pop-Up: How do they do this??

    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

  2. #2
    SitePoint Zealot
    Join Date
    Apr 2007
    Location
    New London, CT
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    look up "lightbox"
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  4. #4
    SitePoint Addict AtSea webdesign's Avatar
    Join Date
    May 2010
    Location
    Newark, Delaware
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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).

  6. #6
    SitePoint Evangelist TomTees's Avatar
    Join Date
    Apr 2010
    Location
    Iowa
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  7. #7
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,619
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

  8. #8
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,963
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    On this page you find 30 variants on the jQuery lighbox plugin

    30 lightbox variants

  9. #9
    SitePoint Addict AtSea webdesign's Avatar
    Join Date
    May 2010
    Location
    Newark, Delaware
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    when I try these examples they just open another tab. No popup. Am I missing something?

  10. #10
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,619
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AtSea webdesign View Post
    when I try these examples they just open another tab. No popup. Am I missing something?
    I can't think of a way that they would do that. :focus and :target do not have that power.

  11. #11
    SitePoint Addict AtSea webdesign's Avatar
    Join Date
    May 2010
    Location
    Newark, Delaware
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    http://www.ericmmartin.com/projects/simplemodal/

  12. #12
    Non-Member Thinkerll's Avatar
    Join Date
    Aug 2010
    Location
    amaerica
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, even i have watched your link, i don't understand what's your mean

  13. #13
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by AtSea webdesign View Post
    You cannot do a dialog/modal with css only. You can however do a tooltip with css.
    Really? Please feel free to explain how I did this for a demo on Six Revisions then

    http://downloads.sixrevisions.com/cs...ox/source.html

  14. #14
    SitePoint Addict AtSea webdesign's Avatar
    Join Date
    May 2010
    Location
    Newark, Delaware
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  15. #15
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    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)

  16. #16
    SitePoint Addict AtSea webdesign's Avatar
    Join Date
    May 2010
    Location
    Newark, Delaware
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    learn something new everyday. That's what I love about this forum.

  17. #17
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,619
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AtSea webdesign View Post
    the demo provided initially in this thread didn't work at all. Alex, yours works nicely. Didn't know you could do that.
    Why do you keep saying that? It works perfect!

  18. #18
    SitePoint Addict AtSea webdesign's Avatar
    Join Date
    May 2010
    Location
    Newark, Delaware
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Why do you keep saying that? It works perfect!

    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

  19. #19
    SitePoint Evangelist TomTees's Avatar
    Join Date
    Apr 2010
    Location
    Iowa
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.



    TomTees

  20. #20
    SitePoint Addict AtSea webdesign's Avatar
    Join Date
    May 2010
    Location
    Newark, Delaware
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  21. #21
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,619
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Just go through all these and find the one that matches. Then follow the directions. http://www.designyourway.net/blog/re...htbox-plugins/

  22. #22
    SitePoint Evangelist TomTees's Avatar
    Join Date
    Apr 2010
    Location
    Iowa
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AtSea webdesign View Post
    Tom, I told you in a previous reply that they are using thickbox.
    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

  23. #23
    SitePoint Addict AtSea webdesign's Avatar
    Join Date
    May 2010
    Location
    Newark, Delaware
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •