Code Snippet

Home » Code Snippets » jQuery » Append Site Overlay DIV

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. 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. 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. @ryan: the ‘aboved’ element should have ‘position:relative;’

  6. fuqiang

    perfect! how beautiful it is !

  7. El garch Hicham

    Bon travail Man ;-)

  8. I would like to use the site overlay for the following problem:

    I would like to see the overlay while the page is being loaded. On that page data is collected from a database.
    When all db-loading has finished the overlay should disappear automatically.

    Can this be done?
    And a second question: can I put a preloader-image above the overlay that also disappears when the page is totally loaded?

    Thx!!

  9. i would like to use a drop down menu in the north layout of jquery layout as given as follows-
    http://layout.jquery-dev.net/demos/popups.html

    The menu drop down elements goes behind the layout .It is not overlaying the layout to display its content from north panel

  10. What’s the best way to make the opacity work with IE8?

Speak, my friend

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 ~