A Web Design Community curated by Chris Coyier

A little dab'll do ya

Code Snippets

Code Snippets > jQuery > Append Site Overlay DIV Submit one!

Append Site Overlay DIV

$(function() {

   var docHeight = $(document).height();

   $("body").append("<div id='overlay'></div>");

   $("#overlay")
      .height(docHeight)
      .css({
         'opacity' : 0.4,
         'position': 'absolute',
         'top': 0,
         'left': 0,
         'background-color': 'black',
         'width': '100%',
         'z-index': 5000
      });

});

Overlays entire site with a black tint, disabling all links and bringing into focus anything above it.

Subscribe to The Thread

  1. I wonder if ‘fixed’ positioning would be better too if the page scrolled…. not sure I guess I should test this better.

  2. Giacomo says:

    Thanks a lot man! I’ve just discover your snippets repository, and i’ve become enthusiastic about it!

  3. thanks man : -) nice and simple

    i was just thinking maybe check if id exists and create some alternative id or abort?

    thanks for nice sample code

  4. Ryan says:

    Perfect! What might be a good way to utilize this, but then have a single element above it? I tried setting that elements z-index above yours, but it still get’s grayed out–any ideas?

  5. Sasha says:

    @ryan: the ‘aboved’ element should have ‘position:relative;’

  6. fuqiang says:

    perfect! how beautiful it is !

  7. El garch Hicham says:

    Bon travail Man ;-)

It's Your Turn

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
--- The Management ---