Update progress message on top of a transparent layer

When user clicks a submit button, an update progress message shows up, but the background is disabled and transparent.

2009-06-09_110753

How to do this?

We need AJAX. To be specific, we need UpdatePanel and UpdateProgress and some CSS trick.

The AJAX part is very simple, and it is the CSS that does the actual trick to create the transparent and disabled background.

AJAX part:

    <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
        <ProgressTemplate>
        <asp:Panel ID="pnlBackGround" runat="server" CssClass="popup-div-background">
            <div id="divFeedback" runat="server" class="popup-div-front">
                <img src="../Images/ajax-loader.gif" border="0" />
                The request is being processed. Please wait...<br />
                This window will disappear when the process is finished.
            </div>
        </asp:Panel>
        </ProgressTemplate>
    </asp:UpdateProgress>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
       <div>
        <div class="clear-div"></div>
        <div class="section-heading">
            <asp:Label ID="lblPageTitle" runat="server" EnableViewState="false">AJAX Update Progress</asp:Label>
        </div>
        <div class="section-information">
        <div class="clear-div"></div>
        <asp:Label ID="lblResults" runat="server" EnableViewState="false" Visible="false"></asp:Label>
        <asp:Button ID="btnProcess" runat="server" Text="Process" OnClick="btnProcess_Click" />
            <br />
        </div>
    </div>
        </ContentTemplate>
    </asp:UpdatePanel>


Button’s Click event:

Nothing special. System.Threading.Thread.Sleep(5000) is added to simulate the network latency or the long process.

    Protected Sub btnProcess_Click(ByVal sender As System.Object, ByVal e As System.EventArgs)
        For i As Integer = 0 To 10
            Me.lblResults.Text += DateTime.Now.ToString() & "<br />"
            Threading.Thread.Sleep(1000)
        Next
        Me.lblResults.Visible = True
    End Sub


CSS:

.popup-div-background
{
    position:absolute;
    top: 0;
    left: 0;

    background-color:#ccc;
    filter:alpha(opacity=90);
    opacity:0.9; 

    /* the following two line will make sure
    /* that the whole screen is covered by
    /* this transparent layer */

    height: 100%;
    width: 100%;
    min-height: 100%;
    min-width: 100%
}
.popup-div-front
{
    background-color: #ffffff;
    color: black;
    width: 70%;
    text-align: left;
    vertical-align: middle;
    position: absolute;
    top: 5%;
    left: 15%;
    bottom:5%;
    font-weight:bold;
    padding: 10px 5px 5px 5px;
    font-family:Verdana;
}

That’s it…and here is a demo for you to see how it works.

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Abhishek Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Abhishek
Guest
Abhishek

This is amazing.