CODEWITHSUNDEEP
asp.net
Nagaraj P
Nagaraj P

Reputation: 61

How to hide the page on load indicating in asp.net

I am using ASP.NET 2.0 and AJAX extension tool.

I already created loading indicator on button submit. When I will click the button, the loading indicator will show after redirecting to the next page. But, I want to hide the page until processing has completed (after that redirect to next page).

I am using the following code:

 <td style="width: 100px; height: 26px;">
                  <asp:ScriptManager ID="ScriptManager1" runat="server">
                </asp:ScriptManager> 
                <asp:UpdateProgress ID="UpdateProgress1" DynamicLayout="false" runat="server">
    <ProgressTemplate>
    <img src="Images/loading.gif" alt="Images/loading.gif" style="z-index: 100; left: 21px; position: absolute; top: 64px" />

    </ProgressTemplate>
    </asp:UpdateProgress>
                 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                    <dx:ASPxButton ID="btnOk" ClientInstanceName="btnok" runat="server" Style="z-index: 100; left: 90px; position: absolute;
                    top: 108px" Text="OK" Width="61px" BackColor="Gainsboro" OnClick="btnOk_Click" AutoPostBack="False" >
                    <DisabledStyle>
                        <Border BorderColor="Teal" />
                    </DisabledStyle>
                        <ClientSideEvents Click="function(s, e) {
                    ShowloadingImage();
                        }" />


                </dx:ASPxButton>
               </ContentTemplate>
            </asp:UpdatePanel>

Upvotes: 0

Views: 796

Answers (2)

Nagaraj P
Nagaraj P

Reputation: 61

using jquery we can hide the page on page loading...I am using following code

       $(function() { 
    ($.unblockUI);   
    $('#pnlLogin_btnOk').click(function() {
        $.blockUI({ message: '<img src="Images/loading.gif" />' });
    });
});

Upvotes: 0

Aristos
Aristos

Reputation: 66641

To "hide" your page you can make an overlay div over all, using this css

.OverAll
{
   height:100%;
   width:100%;
   position:fixed;
   left:0;
   top:0;
   z-index:2 !important;
   background-color:black;
}

Upvotes: 1

Related Questions