Looking Overlay options using JQuery

I am new to JQue开发者_JS百科ry and looking for some options to show an overlay with spinner (progress bar) on the page and my another requirement is to disable the page till my page loads with data and the spinner is active when my page is loading data and goes away once the data is ready. Can you give me some idea how to achieve this requirement.

Thanks in advance.

I would check out jQuery UI's Dialog feature. It can do a modal boxes filled with arbitrary content.

http://docs.jquery.com/UI/Dialog

To implement, I would add logic into your global AJAX options to show/hide the dialog as needed. This link shows you how. The same principle would apply to the ajaxEnd event.

Once you have those hooked up, any ajax request will fire that spinner logic. One caveat for both, however. The example shows the event handler being hooked up to an arbitrary DOM element; you'll want to hook it up to the document element.