65.9K
CodeProject is changing. Read more.
Home

Create Modal Popup in Ajax UpdateProgress

starIconstarIconstarIcon
emptyStarIcon
starIcon
emptyStarIcon

3.38/5 (7 votes)

May 25, 2011

CPOL
viewsIcon

47392

A simple method to implement modal popup during ASP.NET asynchronous request using ASP updatepanel and updateprogress

I searched the web for a simple trick to create a modal popup during asynchronous update in ASP.NET page but it resulted in very complex programming methods using ASP.NET modalextender, etc. So I decided to do it myself. It's a very simple CSS trick. Modal Div Code
<div style="background-color:Gray;    filter:alpha(opacity=80);    opacity:0.80; width: 100%; top: 0px; left: 0px; position: fixed; height: 800px;">

        </div>
Div displaying Image
<div style="margin:auto;     font-family:Trebuchet MS;filter:alpha(opacity=100);    opacity:1;     font-size:small;     vertical-align: middle; top: auto; position: absolute; right: auto; color: #FFFFFF;">
                <table>
                <tr>
                <td><img src="images/big-roller.gif" alt="Loading"  /></td>
                <td><span style="font-family: Georgia; font-size: medium; font-weight: bold; color: #FFFFFF">Loading..</span></td>
                </tr>

                </table>

        </div>
Page Design
<asp:UpdateProgress ID="UpdateProgress1" runat="server"
        AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="10">
    <ProgressTemplate>
        <div style="background-color:Gray;    filter:alpha(opacity=80);    opacity:0.80; width: 100%; top: 0px; left: 0px; position: fixed; height: 800px;">

        </div>
          <div style="margin:auto;     font-family:Trebuchet MS;filter:alpha(opacity=100);    opacity:1;     font-size:small;     vertical-align: middle; top: auto; position: absolute; right: auto; color: #FFFFFF;">
                <table>
                <tr>
                <td><img src="images/big-roller.gif" alt="Loading"  /></td>
                <td><span style="font-family: Georgia; font-size: medium; font-weight: bold; color: #FFFFFF">Loading..</span></td>
                </tr>

                </table>

        </div>

    </ProgressTemplate>
    </asp:UpdateProgress>
This will display a modal popup simply...