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. User Avatar
    Chris Coyier
    Permalink to comment#

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

  2. User Avatar
    Giacomo
    Permalink to comment#

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

  3. User Avatar
    Artur Ejsmont
    Permalink to comment#

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

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

  6. User Avatar
    fuqiang
    Permalink to comment#

    perfect! how beautiful it is !

  7. User Avatar
    El garch Hicham
    Permalink to comment#

    Bon travail Man ;-)

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

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

  11. User Avatar
    Karl Groves
    Permalink to comment#

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

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

  13. User Avatar
    ShaoKhan
    Permalink to comment#

    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. User Avatar
    Yugal Jindle
    Permalink to comment#

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

    Super liked.. **

  15. User Avatar
    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!

    • User Avatar
      Jules Mazur
      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.

    • User Avatar
      Ryan Burnette
      Permalink to comment#

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

    • User Avatar
      jamie paterson
      Permalink to comment#

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

    thanks

  17. User Avatar
    Peter
    Permalink to comment#

    How do you close this? Trying everything including:

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

    not getting results though…

  18. User Avatar
    Dan
    Permalink to comment#

    Peter

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

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

    • User Avatar
      Peter
      Permalink to comment#

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

    • User Avatar
      Peter
      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. User Avatar
    Karthik Kumar
    Permalink to comment#

    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. User Avatar
    Karthik Kumar
    Permalink to comment#

    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. User Avatar
    luchid

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

  22. User Avatar
    KevinOrin
    Permalink to comment#

    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. User Avatar
    Lance Blackstrong
    Permalink to comment#

    Thanks a million! you rock.

  24. User Avatar
    uananddbz
    Permalink to comment#

    why dont we use min-height:100% ?

  25. User Avatar
    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. User Avatar
    amazing
    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. User Avatar
    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. User Avatar
    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. User Avatar
    Evrim
    Permalink to comment#

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

    Is there a capability issue?

    Thanks

  30. User Avatar
    Amazing
    Permalink to comment#

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

    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. User Avatar
    Keyboard

    How do you close this? Trying everything including:

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

    not getting results though…

  33. User Avatar
    clif

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

  34. User Avatar
    Lao Keyboard
    Permalink to comment#

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

  35. User Avatar
    Chintan Parikh
    Permalink to comment#

    Any better way of doing this in pure javascript?

  36. User Avatar
    Stan
    Permalink to comment#

    How do I use this on my Weebly site?

  37. User Avatar
    Emran
    Permalink to comment#

    Thank u so much !!

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag