Question

I want to use an ajax loader while loading the page with transparent background. I tried the following code which displays the loading image but how to cover whole backgroung as transperent. My code is:

<div class="UpdateProgress1">
<asp:UpdateProgress ID="UpdateProgress1" runat="server" DynamicLayout="true">
<ProgressTemplate>
    <img src="image/ajax-loader.gif"  /> Loading ...
</ProgressTemplate>
</asp:UpdateProgress>
</div>

And my css is:

.UpdateProgress1 {
 color:#fff;
 position:fixed;
 filter:alpha(opacity=50);
 -moz-opacity:0.5;
 -khtml-opacity: 0.5;
 opacity: 0.5;
 vertical-align: middle;
 text-align: center;
 background-color: #000;
 float: left;
 top:18%;
 left:13%;
 width:73%; 
 }

If anyone knows any link or any solution please tell me. and in the above css if i add the height property the image get displayed at the page load time without click event.
thank you.

Answer 1

Use an Iframe with an higher z-index to block the main page.

<iframe id="blockPage" src="about:blank" style="display: none; position: absolute;
        z-index: 10; filter: Alpha(Opacity=40) DropShadow(Color=#454545);"></iframe>

Use the following functions to show and hide the frame

function BlockPageContent()
{
    var ifrm = document.getElementById("blockPage");
    if(null != ifrm)
    {
        ifrm.style.display = "block";
        ifrm.style.top = 0;
        ifrm.style.left =0;
        ifrm.style.width=screen.availWidth;
        ifrm.style.height = screen.availHeight; 
    }
}

function ShowPageContent()
{
    var ifrm = document.getElementById("blockPage");
    if(null!= ifrm && ifrm.style.display != "none")
    {
        ifrm.style.display = "none";
    }
}

and call the above function in the following fashion.

Call BlockPageContent in “InitializeRequest” and ShowPageContent in “EndRequest”. “InitializeRequest” and “EndRequest” are eventhandlers of PageRequestManager object.