SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict Quaint's Avatar
    Join Date
    May 2004
    Location
    Netherlands
    Posts
    219
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Gray out page with pop-up

    Hello,

    I created a technology test that I launched alongside with my new weblog, which you can read about here: http://quainttech.blogspot.com/.

    The blog might not be of great interest, but the technology definitely is. Basically it's a simple implementation of a Web 2.0 technique that grays-out the entire page, so that the users attention shifts to a pop-up. Go look if you don't know what I'm talking about here

    By the way, is there a name for this technique? Or can you think of any better name than 'Gray out page with pop-up' :P ?
    Last edited by Quaint; Mar 21, 2007 at 07:43.

    Quaint Tech
    - Blog on web development and web technology.

  2. #2
    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)
    The technique was popularised (and invented, I think) by Lightbox JS so I think people tend to refer to them as 'lightboxes'. Other popular ones are Thickbox and Lightbox Gone Wild.

    Some other websites have started using their own versions, such as deviantART and British Airways. All they have in common is the half-opaque black box covering everything and a box with something in the middle. It looks very cool and can be useful, but technology-wise it's not that amazing - it's just creating and showing and hiding HTML elements with javascript, which people have been doing for years. Also, things like Lightbox and Thickbox rely on javascript libraries (prototype and jQuery respectively) which can add non-insignificant bloat to your page.

    I can see a problem with yours. The first time I clicked on the link, the half-opaque overlay appeared after the box with the content did. Subsequent clicks made them both appear at exactly the same time.

    Also, everyone else creates the HTML elements necessary for it with javascript. In your case the overlay and box in the middle are cluttering up the source when "view source" is chosen in the browser.
    Also, you're using the inline "onclick", while the other scripts are unobtrusive and attach the event to an anchor based on a class or rel attribute.

  3. #3
    SitePoint Evangelist
    Join Date
    Mar 2006
    Location
    Sweden
    Posts
    451
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem with the 100% height is that if you have a screen which is smaller than the content, you can scroll down and when you scroll, the grey box doesn't cover the entire page.

  4. #4
    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't use CSS to make that grey box reliably the right size. It's possible if you use position:fixed and top:0 bottom:0 left:0 right:0 for it because it's relative to the viewport, so if the body has margins it still will fill up the whole page. Still, this brings up the problem with IE6 and for this you'll have to use document.body.clientHeight to work out how high to make it.

    Then there's also the problem of the user scrolling and the box disappearing. Again, you can use position:fixed and change the top: style property onscroll to make up for IE6's deficiencies.

  5. #5
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's another one Page Grey

  6. #6
    SitePoint Addict Quaint's Avatar
    Join Date
    May 2004
    Location
    Netherlands
    Posts
    219
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I definitely didn't suspect that this version would be flawless, and like I've said before it's tested with MSIE7 and Firefox 2.x and it worked fine on both (actually even with resizing the screen, etc). My old version automatically resized the gray overlay when the clients screen dimensions changed, but this seemed to work fine as well..

    Anyway, this was just a bit of a test project for me.. Learned a lot from it, got enthusiastic and decided to share my findings.. If it is any good to any one (the escape button feature is nice :P) it's free for use, otherwise it'll just be standing there :P

    Quaint Tech
    - Blog on web development and web technology.

  7. #7
    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)
    Well, all the advantages you mention about yours are also things that the others offer. Still, I can certainly understand why you'd be proud of what you've done, I'd be too.

  8. #8
    SitePoint Addict Quaint's Avatar
    Join Date
    May 2004
    Location
    Netherlands
    Posts
    219
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Haha thanks

    Quaint Tech
    - Blog on web development and web technology.


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
  •