Design an UI-Overlay for the webpage using jQuery

overlay-code-fragments

// JS CODE ===================================

//Added for overlay, while ajax data is being loaded.

var $overlay_wrapper;
var $overlay_panel;

function show_overlay() {
    if ( !$overlay_wrapper) append_overlay();
    if(!$($overlay_wrapper).is(':visible'))
        $overlay_wrapper.fadeIn(700);
}

function hide_overlay() {
    if($($overlay_wrapper).is(':visible'))
        $overlay_wrapper.fadeOut(500);
}

function append_overlay() {
    $overlay_wrapper = $('<div id="overlay"></div>').appendTo( $('BODY') );
    $overlay_panel = $('<div id="overlay-panel"></div>').appendTo( $overlay_wrapper );

    $overlay_panel.html( '<img src="/assets/animate.gif" width="150px" />' );
}

// CSS ==================================

/* Added for overlay div*/
#overlay {
    width: 100%;
    min-height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background: #000 repeat 0 0;
    opacity: 0.8;
    display: none;
    text-align: center;
}

#overlay-panel {
    margin: 20% auto 0 auto;
    width: auto;
    background: transparent;
}

.loader_image{
    line-height: 130px;
    min-width: 273px;
    text-align: center;
    width: 100%;
}


// This is for general ajax call, where before every call it will show the overlay and after it, it will hide it.
// Here i have used basic loading image, that can be replaced with some fancy popup div.
//You can also call this show/hide methods as per your requirement.

$.ajaxSetup({
        beforeSend: function() {
            show_overlay();
        },
        complete: function(){
            hide_overlay();
        }
    });

There is a good plugin with lots of features
https://github.com/malsup/blockui/