Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / web / CSS

Create Modal Popup in Ajax UpdateProgress

3.38/5 (7 votes)
27 May 2011CPOL 47.4K  
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
XML
<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

XML
<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

XML
<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...

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)