How to show masking with message (ex. Please wait..) in jquery?

You may need to implement a functionality in your website that when a user clicks on submit button or any link then there should be something to tell user that application is doing something behind the scene and please wait before completing this task. Application should show a user friendly message like "Please wait...", "Saving.." etc. on occurring of some event like button click, link click etc.

Here I will be letting you know how to implement this type of functionality in your website.

Html:

<div id='mask'>

</div>

<div id="divShowLoading" class="loading" style="display: none; position: fixed !important">

   <div id="divShowLoadingText" class="loading_text">
   </div>   

</div>

These divs will be using to show message. 
"mask" div is for showing masking.
"divShowLoading" div is parent div containing text to be shown.
"divShowLoadingText" div is for showing actual text.

By default these divs will be invisible. When user will trigger an event lick click on button they will be showing using jquery code. It is recommended to keep this code in master page as masking will be implemented throughout the website.

CSS:

#mask

{

       position: absolute;

       left: 0;

       top: 0;

       background: #000;

}

.loading

{

    position: fixed !important;

    width:180px;

    background:#008dc4;

    background: -moz-linear-gradient(top,#008dc4 0%,#37b4e4 100%);

    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#008dc4),color-   stop(100%,#37b4e4));

    background: -webkit-linear-gradient(top,#008dc4 0%,#37b4e4 100%);

    background: -o-linear-gradient(top,#008dc4 0%,#37b4e4 100%);

    background: -ms-linear-gradient(top,#008dc4 0%,#37b4e4 100%);

    background: linear-gradient(top,#008dc4 0%,#37b4e4 100%);

    border-color: white;

    color: white !important;

    border-radius: 8px;

    -moz-border-radius: 8px;

    -webkit-border-radius: 8px;

    height: 40px;

    padding-top: 20px;

    text-decoration: none;

    position: absolute;

    display: none;

    z-index: 5000001 !important

 }

.loading_text

{

    font: 20px "Trebuchet MS";

    text-align: center;

    margin-bottom: 15px

}

Paste this code in your .css file. 

Java Script:

function ShowLoading(TrueOrFalse, Message, BoxWidth) {

    if (TrueOrFalse == true) {

        var maskHeight = $(window).height();

        var maskWidth = $(window).width();

        $('#mask').css({ 'width': $(window).width(), 'height': $(document).height() });

        $('#mask').fadeTo("fast", .5);

        $('#mask').css({ 'z-index': '500' });

        $('#divShowLoadingText').html(Message);

        $("#divShowLoading").css({ 'top': maskHeight / 2 - (($("#divShowLoading").height() / 2) + 60), 'left': maskWidth / 2 - $("#divShowLoading").width() / 2, 'display': 'block', width: BoxWidth });

        BringLoadingtoFront_Popup();

        $("#divShowLoadingText").show();

    }

    else if (TrueOrFalse == false) {

        $('#mask').css({ 'display': 'none' });

        $('#divShowLoading').css({ 'display': 'none' });

    }

    else {

        $('#divShowLoadingText').html(TrueOrFalse);

    }

}

function BringLoadingtoFront_Popup() {

    $('#divShowLoading').css({ 'z-index': '10000' });

    $("#divShowLoadingText").css({ 'z-index': '10001' });

}

Place this code in a new javascript file and add reference of this file in you master page. Do not forget to add reference of core java script file before reference of this file.

"ShowLoading" function will be used to show messages with mask. This function has 3 parameters:

TrueOrFalse: Whether masking will be shown or hide. Valid values: true, false
Message: Message to be shown in masking.
BoxWidth: Width of box in which message will be showing.

Html (Actual Page):

<script type="text/javascript">

    $(document).ready(function () {

        $("a").click(function () {

            ShowLoading(true, "Please Wait...", 250);

        });

    });

</script>

Now you just need to call "ShowLoading" function on occurring of any event. In this example i have called this function on clicking of all links.
I have passed "true" in first parameter because i want to show message on clicking on all link elements.
I have passed "Please Wait..." in message parameter as i want to show this message on clicking on all link elements.
I have passed 250 as width of box.