Question

i want to load a dialogue box before the page is load

like this
Demo here
in this demo it brings data by Ajax but in my case I did not use the Ajax to bring the data ? any idea please..

Answer 1

Use jQuery UI dialog. Try something like this:

<div id="loadingDialog" onload="dialogDivLoad()">
    <img src="images/loading.png" alt="Loading" />
</div>

And the code is:

function dialogDivLoad() {
    $(this).dialog({
        modal: true
    }); // make it modal
}

$(function () {
    $('#loadingDialog').dialog('close');
});

If you retrieve data by AJAX using jQuery .ajax function try this instead:

$(function () {
    $('#loadingDialog').dialog({
        autoOpen: false,
        modal: true
    });
});

// somewhere in place of AJAX call
// show it here
$('#loadingDialog').dialog('show');
$.ajax({
    //...
    complete: function() {
        // and close here
        $('#loadingDialog').dialog('close');
    },
    success: function() {
        // message, that data loaded
    },
    error: function() {
        // message, that data loading failed
    }
});