Overlay js

Overlay page with greyed div

by Checha Man

HTML

<div id="content">
    <a href="#" id="link">Press Me</a>
    <div id="loading">Loading ...</div>
</div>

CSS

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    background: black;
    opacity: 0.8;
    z-index: 100;
}
#loading {
    z-index: 101;
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    margin-top: -9px;
    display: none;
    margin: auto;
    color: #ffffff;
}

JavaScript

$("#link").on( "click", function(e) {
    $('body').append('<div id="overlay"></div>');
    $("#overlay").fadeIn();
    $("#loading").show();
});