$(function () {

    $('body').append("<div id='mask'></div>");

    $('#mask').css('position', 'absolute')
        .css('z-index', 9000)
        .css('background-color', '#000')
        .css('left', 0)
        .css('top', 0)
        .hide()
        .click(function () {

        HideModal("#masks");

    });

});

function HideModal(itemToHide) {

    $('#mask').hide();
    $(itemToHide).hide();
}

function ShowModal(itemToShow) {

    //Get the screen height and width
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();

    //Set height and width to mask to fill up the whole screen
    $('#mask').css({ 'width': maskWidth, 'height': maskHeight });

    $('#mask').fadeTo(500, 0.8);

    //Get the window height and width
    var winH = $(window).height();
    var winW = $(window).width();

    var offset = $(window).scrollTop();

    //Set the popup window to center
    $(itemToShow)
        .css('top', (winH / 2 - $(itemToShow).height() / 2) + offset)
        .css('left', winW / 2 - $(itemToShow).width() / 2);

    $(itemToShow).fadeIn(500);
}