Lights Out – Dimming/Covering Background Content with jQuery

Lights Out – Dimming/Covering Background Content with jQuery

This is a quick and easy approach that tackles a pretty common technique. By the end of this tutorial you will be able to add pop up message boxes complete with dimmed background to your existing site. Feel free to take a look at the demo to scope out exactly what we’ll be creating here today.

You may already be familiar with Lightbox – which does a number of the things we are aiming to accomplish today, so as an added disclaimer – The purpose of this tutorial is simply to show you how to dim/cover the background while displaying a message box.

The Concept

Here’s the gist: When a link is clicked a div that covers the entire page becomes visible and lays on top of the content. On top of that we have our message box which hides everything again when it gets closed. There are a number of different customizations we can make to this process, but it’s important to have the overall picture before tweaking too much.

Step 1 – The HTML

When applying this to your own site, you will only need to include the top overlay and message box section, as the rest is just a placeholder for this example. The one element from the  “content to be hidden” section you will want/need to grab is the “.alert” link which will be the trigger for the message box when clicked.

I have named the overlay layer “fuzz” as it will be TV-style  static, this is easily adjustable in case that’s not what you want – more on that in Step 2.

Step 2 – The CSS

Next up let’s take care of the styling for our overlay and message box:

If you want to change the overlay (#fuzz) to anything other than static, it is a simple matter of changing the background image – I have also included a semi-transparent black png that can be used for the dim effect in the attached files.

Step 3 – The jQuery

I have commented each item below to help guide you along:

As far as customization at this stage, you could simply choose to replace fadeIn/Out with show/hide for instant results. You could also go as far as having the message box slide in from off screen. Quite a few possibilities, get creative with it.

The Wrap Up

Keep in mind that the message box can act as a canvas for whatever you like, you’re not limited to just text. I’m always fascinated to see what you can come up with. I have included two separate variations in the attached files – one with a static overlay and the other with a simple dimmed background – to help you along.

Finally I have to give a few shout out to things that inspired the article, a big thank you goes out to each:

Posted Tuesday, August 4th, 2009 · Back to Top

SPONSOR

Add Comment

50 Comments 40 Mentions

  1. Austin Author Editor

    Cool post. Would it be possible to dim using opacity? It would make things a little more complicated (you would have to set the background-color of #content to #000 and then fade it out), but I think it would work.

    ·

  2. Kiran Patel Author Editor

    nice tutorial will use it in future project!

    ·

  3. Michal Kubenka Author Editor

    Did you try it in IE6? :-\

    ·

    • Sam Dunn Author Editor

      IE6 is an increasingly more defunct browser, we’ve stopped going out of our way to support it – you should too : )

      ·

    • Karen Author Editor

      Who the hell uses IE6 ??!!
      Those who do don’t deserve such cool experiences.

      ·

  4. bang Author Editor

    haha, yea if only every people on the net could think this way :)

    btw, it seems to work on IE6->8 with ietester anyway, just no transparency with ie6. but we dont care

    ·

  5. Rick Author Editor

    Nicely explained article! And AMEN to letting IE6 die and rot in hell where it belongs!
    cheers

    ·

  6. Kayla Author Editor

    Very nice tutorial! I may very well be using this in a client project I’m working on very soon.
    .-= Kayla´s last blog ..25 Brilliant Digital Art Pieces Inspired by Outer-Space =-.

    ·

  7. EasyWPAdmin Author Editor

    Easy to follow, even a novice can tackle this tutorial. Nice job!
    .-= EasyWPAdmin´s last blog ..WordPress Version 2.8.3 =-.

    ·

  8. David Li Author Editor

    How can I just this effect in conjuction with client-side image map? I have a large composite of 60+ people.

    basically, I want the user to click on a portrait of an individual and have a bigger(different) image pop up like this effect.

    check out my yahoo answers question

    http://answers.yahoo.com/question/index?qid=20090805211813AAi8L2E

    ·

    • Sam Dunn Author Editor

      You will just have to make a lot of separate click events for each of the 60 people and have each trigger an image in the msgbox

      ·

  9. David Li Author Editor

    not sure what you mean there

    how can i make events for each map?

    ·

  10. Sam Dunn Author Editor

    This is a click event

    $(“.alert”).click(function(){
    $(“#fuzz”).fadeIn();
    return false;
    });

    You will have to make one for each person, which causes the desired div (in this case #fuzz) fade in

    ·

  11. 阿呆 Author Editor

    very good,thanks.

    ·

  12. Erwin Schro Author Editor

    Sam, Is it possible to adapt this for 404 error page for example? Could you give me a little hint on how to do that?

    thanks

    ·

  13. Sam Dunn Author Editor

    @Erwin Schro
    I’m not entire sure what you’re trying to do, I suppose you could implement this on a 404 page in the same way you would on any other page.

    ·

  14. Alex Author Editor

    It’s great to prevent user from over action in forms. Thank you a lot!

    ·

  15. Michael Soriano Author Editor

    How do you make it where it just automatically dims without having to click?
    .-= Michael Soriano´s last blog ..Getting Rid of Unwanted Backslashes in WordPress Form Input =-.

    ·

  16. öğrenme nesneleri Author Editor

    Thanks, cool application

    ·

  17. Hetal Author Editor

    Nice tutorial… would be useful in future projects.
    .-= Hetal´s last blog ..Working with Eclipse and Code Igniter =-.

    ·

  18. Veera Author Editor

    I use JQuery UI scripts for creating such kinda model dialogs. btw, I like the ‘static’ model dialog with all thoise ‘noise’ animations. it’s classic. :)
    .-= Veera´s last blog ..Firefox 3.6 to support Web Open Font Format =-.

    ·

  19. Origin Ideas Author Editor

    it seems a position problem if apply to a long page, the popup div even couldn’t see if the page long enough (appear very below), any bug fix about it?

    ·

  20. Evan Author Editor

    Thanks for this. Its very well explained. I have one question though. How could i use an image button that will open the div. This is my current code.

    the button button-left is my css code for the button but when i try the above code it never opens the div.

    ·

  21. Casey Author Editor

    Awesome demonstration! I definitely will find a use for the “Static” overlay.

    ·

  22. Andy Author Editor

    Great post, just one little bug, if the page is a long one and the scroll bar is needed, if you scroll down straight after you hit the dim button, the page below is still visible. Is there anyway around this?

    ·

    • Ryan Author Editor

      $(document).ready(function(){

      $(“#dim”).css(“height”, $(document).height()); // default
      $(“#dim”).css(“height”, $(“#msgbox”).height()); // change to the height of whatever is inside “#dim”, such as the height of a long message box that exceeds the bottom of the page. This will in theory make the effect not work with content less than the full height of a page that does not require scrolling.

      ·

  23. creig Author Editor

    love your tuts, just have a question not to insult your knowledge at all, but wouldnt it be better to use

    left:auto
    right:auto

    to center in all browsers?

    ·

  24. twig Author Editor

    Great site!

    I’ve been trying to customise this overlay method, by creating the overlay with javascript. I managed to do so but couldn’t get it to fadeIn without fading the page content too.

    Any chance you could suggest a method to create this.

    x

    ·

  25. Ehab Author Editor

    Hey, Great tutorial!!

    but what if i want to upload an html page or swf file instead of the subscribe.jpg (after the screen is dimmed). is that possible?

    –Thanks

    ·

  26. Ehab Author Editor

    hmm, any chance i can get an answer to my question? :(

    ·

  27. LD Author Editor

    I’m developing a web side for print service http://www.tils-print.co.uk and this is exactly what I was looking for. Great idea!!!

    ·

  28. mikeys Author Editor

    hmm Andy was it? You could try doing #fuzz{position:fixed;}
    instead of absolute to avoid seeing scrollable content.

    ·

  29. andrew Author Editor

    hi! I’m a newbie in jQuery. Thanks for sharing your brilliant idea!

    I’ve modified your script for the benefit of IE6 users… And added some jQuery effect so that whenever you scroll the page, the message box follows…

    here’s the link:
    http://xyneodrew.blogspot.com/2010/07/dimming-background-message-box-with.html

    thanks dude!

    ·

  30. yasam phani Author Editor

    Thanks for sharing your brilliant idea..!!!

    ·

  31. yasamphani Author Editor

    awesome..!!!

    ·

  32. PND Author Editor

    Awesome ! Thank you

    ·

  33. Omar Author Editor

    How would I make this run automatically on page load?

    ·

  34. Brandon Author Editor

    The code works nicely but I am experiencing an issue. A flash object appears over top of the pop-up once you click on the box. I’ve tried setting z-index order to all the elements but still experiencing the same issue. Has anybody else noticed this?

    ·

  35. eTube Author Editor

    Very very Cool.. Thank u very much..

    ·

  36. Praveen Isaac Author Editor

    Thank you sam!

    ·

  37. Victoria Author Editor

    Very cool. I love your tutorials. Anyone get an answer on how to do this automatically on page load?

    ·

  38. Nathan Author Editor

    Hi,
    Great tutorial as always, thanks!
    I have a query about setting the message box to the middle of the screen though – I’ve just implemented this into a clients website who has a list of products on a page. I’ve used this as a lightbox to display the product details onclick. However, the message box pops up in the middle of the DIV wrapper rather than the middle of the screen, so if someone clicks on the last product on the page, they have to scroll up to see the message box.
    The site I’ve built has a static background image and the page wrapper overflows the background. Is there some script to ensure the box appears in the middle of the actual screen rather than the page – regardless of how far users have scrolled down?
    I hope this makes sense!
    Thanks in advance!
    Nathan

    ·

  39. Bradley Author Editor

    Highly amusing face.

    ·

  40. CemMfhd Author Editor

    picture of aricept [url=http://avto-new.info/user/JelpUot/] exelon patch vs aricept[/url] – aricept and glantamine together aricept brain injury aricept and frontotemporal dementia [url=http://dynamicentry.net/narrcc/forum/profile.php?id=58674] aricept commercial[/url] – aricept and fainting aricept 5 mg aricept and driving [url=http://rijeka-drzava.com/forum/profile.php?mode=viewprofile&u=48102] aricept fda[/url] – aricept and dreams aricept eisai aricept and down syndrome

    ·

  41. Assilsaroma Author Editor

    French makers are some of the best shoes designers on earth designing the highest quality mens footwear, with all the greatest fashion, comfort and ease as well as fit. If you want the very best, there exists just one best option, that’s Italian! [url=http://www.marcby-marcjacobs.com]www.marcby-marcjacobs.com[/url] Although some with the bags are owned by bag, they may not be since costly because other medication is. Ladies handbag is permitted to bring for official as well as everyday events. [url=http://www.marcby-marcjacobs.com]marc by marc jacobs[/url]

    ·

  42. Michael Sitler Author Editor

    Great tutorial Sam, thank you!

    Some may notice issues with this code when using page zoom in most browsers. If so, simply change the code to the following:

    Change: #dim { position: absolute; } to #dim { position: fixed; }

    Remove .msgbox { margin-top: -100px; }

    Change: .msgbox { top: 50%; } to .msgbox { top: 80px; } //80px can be changed to your liking

    ·

  43. GenNS Author Editor

    Thanks for this…really helpful, except as a few other people have mentioned, if the page is long (if there’s a scroll bar on the page in questions), the #dim div appears below the rest of the page rather than over it.

    Any way to fix that? I tried changing the #dim position to fixed instead of absolute, but still no joy. Thanks!

    ·

  44. GenNS Author Editor

    Hmm, maybe it’s not the “long page issue”…I just put your files on my site and the page doesn’t dim on dim.html either.

    I don’t get it.

    ·

  45. GenNS Author Editor

    As a final follow-up, I’d just like to say that I’m a knucklehead and it’s working fine :(

    ·

  46. carbonart.co.kr Author Editor

    But I wouldn’t mind betting that in 10 years time it will be closer to 50%.
    I did not want to compete on price under its own brand.
    Majewskis’ experience is becoming increasingly common, and it’s motorists who are left picking up
    the bill, rather than risk losing a no-claims bonus. He also lied about
    her occupation, telling the insurance company, however, the one-and-a-half miles between us would have penalised Adam if he had been made redundant.

    ·

 

Build Internet by One Mighty Roar. Since 2008.