Grow your CSS skills. Land your dream job.

Last updated on:

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.

Comments

  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. Ryan
    Permalink to comment#

    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. Permalink to comment#

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

  6. fuqiang
    Permalink to comment#

    perfect! how beautiful it is !

  7. El garch Hicham
    Permalink to comment#

    Bon travail Man ;-)

  8. Gerd
    Permalink to comment#

    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. gokul
    Permalink to comment#

    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. James
    Permalink to comment#

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

  11. Interestingly you may note that although a snippet like this may create a visual effect which would overlay the body element and render everything unclickable, this is not how it is handled by some browsers. Items in the “parent” element will still be available via tab & shift+tab keystrokes. To use this in the creation of a modal dialog, for instance, you’ll need to create a tab order that cycles only through the dialog and removing click and keypress events from the rest of the document.

  12. Everything is still grayed out. I tried position relative, that does not work.

  13. maybe you should add

    '-ms-filter' : 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)',
     'filter': 'alpha(opacity=50)',
    
    

    to your css for IE Browsers.

    but so … a nice snippet.

  14. Yugal Jindle
    Permalink to comment#

    You just made it so simple.. why didn’t I thought of it..

    Super liked.. **

  15. Jose
    Permalink to comment#

    how can I code the css for this Overlay div to appear on ipads only. I’m trying to setup this function for ipad users only…

    Thank you!

    • Permalink to comment#

      May I suggest using PHP-Mobile-Detect? I use it to load alternate external stylesheets for various platforms, but it’s entirely possible to use it to just echo alternate code, for example, this snippet, if the script detects an iPad or other tablet. It works using conditional comments, so it’s pretty easy to get the hang of it.

    • I wish I knew of a non-PHP-based way to sniff iOS.

    • What about conditional media queries?

      @media only screen and (device-width: 768px) {
        /* For general iPad layouts */
      }
      
      @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
        /* For portrait layouts only */
      }
      
      @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
        /* For landscape layouts only */
      }
      

      Found here:

      http://css-tricks.com/snippets/css/ipad-specific-css/

  16. pankaj
    Permalink to comment#

    thanks

  17. Permalink to comment#

    How do you close this? Trying everything including:

    $(‘body #overlay’).css(‘display’, ‘none’);

    not getting results though…

  18. Dan
    Permalink to comment#

    Peter

    1- $(“#overlay”).remove();

    2 -$(“#overlay”).hide();

    • Permalink to comment#

      Thanks! I figured it out last week… guess I could have noted that so as to not waste others brain power… :)

    • Permalink to comment#

      By the way, are there better ways to do this these days?

      We’ve run into this issue on IOS:
      After entering usr/pwd – keyboard is left open then press submit – the keyboard closes and the overlay does not fill the entire screen.

      Thanks!

  19. no need to find document height just give its as <br/>

    .overlay{<br/>
    opacity : 0.4;<br/>
    position: fixed;<br/>
    top: 0;<br/>
    right: 0;<br/>
    bottom: 0;<br/>
    left: 0;<br/>
    background-color: black;<br/>
    z-index: 500;<br/>
    }<br/>
    <br/>
    Then just add <br/><br/>
    $("#overlay").addClass('overlay');

  20. no need to find document height just give its as <br/>

    .overlay{
    opacity : 0.4;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: black;
    z-index: 500;
    }

    <br/>
    Then just add <br/><br/>

    $("#overlay").addClass('overlay');

  21. luchid

    I want to use overlay to stop user view content until they register. How to close overlay just after user press Login?

  22. This is worked out great with some modifications.
    If anyone would like the popup fixed and always centered (so you cannot scroll past it).
    .collapse {
    position: fixed;
    width: 700px; (you can change this)
    margin-left: -350px; (if you change width, make this half the width)
    left: 50%;
    top: 0;
    }
    Thanks!

  23. Lance Blackstrong
    Permalink to comment#

    Thanks a million! you rock.

  24. why dont we use min-height:100% ?

  25. Tor
    Permalink to comment#

    Hi, i got the code working, but i would like to ad a function for “clicking” it away (closing the overlay). Im novice when it comes to coding, can anyone give me hint about how fix that?

  26. Permalink to comment#

    Not only your technique DOES use javascript (hell, the first thing you gotta see on your example is a link pointing to javascript:void() !!) but it is not even usable with javascript turned off, which is what alternatives are exactly good at.

    Honestly I don’t see the point of this.

  27. hossein ghorbani
    Permalink to comment#

    The overlay for BlockUI? how close it after this is called
    my Jquery code is:

    $(document).ready(function(e) {
    $(“.mus_play > div”).click(function(){
    $(function() {
    var docHeight = $(document).height();
    $(“body”).append(”

    “);

            $("#overlay")
                .height(docHeight)
                .css({
                     'opacity' : 0.7,
                     'position': 'fixed',
                     'top': 0,
                     'left': 0,
                     'background-color': 'black',
                     'width': '100%',
                     'z-index': 5000
                  });
            }); 
        });
    });
    
  28. mark
    Permalink to comment#

    To Luchid (above) and other site masters like him: Why not just put a blurb on your main page saying that registration is required to view your site? Those overlays are annoying as hell and not at all as cool as you think. It’s aggravating when page loads or clicks or hovers pull up unwanted shit like that.

  29. Permalink to comment#

    Why did you use $("#overlay").height($(document).height()); instead of $("#overlay").css({height:'100%'});

    Is there a capability issue?

    Thanks

  30. This is worked out great with some modifications.
    If anyone would like the popup fixed and always centered (so you cannot scroll past it).
    .collapse {
    position: fixed;
    width: 700px; (you can change this)
    margin-left: -350px; (if you change width, make this half the width)
    left: 50%;
    top: 0;
    }
    Thanks!

  31. no need to find document height just give its as

    .overlay{
    opacity : 0.4;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: black;
    z-index: 500;
    }

    Then just add

    $(“#overlay”).addClass(‘overlay’);

  32. How do you close this? Trying everything including:

    $(‘body #overlay’).css(‘display’, ‘none’);

    not getting results though…

  33. clif

    how would i implement this from start to finish?
    Thanks!
    Newbie

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".