How to show Page loading progress with modal background

Problem:
In my recent application development I have faced a strange problem to show modal background with page loading progress. I had tried in different way but not working perfectly. Then I have solved it. I think that there is another efficient way to solved it but now this time it is working for me.

Solution:

In css class:
.divModalBackground
{
filter: alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5;
width:100%;
background-color: #999988;
position: absolute;
top: 0px;
left: 0px;
z-index: 800;
}

In aspx page:
<asp:Panel ID="Panel1" runat="server" Height="900px" Width="100%" CssClass="divModalBackground" Visible="true" >
<asp:Image runat="Server" ID="ImageLoader" CssClass="LoadingProgress" ImageUrl="../../App_Themes/Black/images/ajax-loader.gif" />
</asp:Panel>


In aspx.cs page I put the code like this:
//to show modal popup at page startup
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
Panel1.Visible = true;
}

In aspx page place this
// to clear the modal background when page load complete, place this code at the end of your page just before the end of the form tag
<script type="text/javascript" >
function init()
{
var objdiv=document.getElementById('<%=Panel1.ClientID%>')
if(objdiv)
{
objdiv.style.visibility = 'hidden';
}
}

init();
</script>

Comments

Anonymous said…
Just want to say what a great blog you got here!
I've been around for quite a lot of time, but finally decided to show my appreciation of your work!

Thumbs up, and keep it going!

Cheers
Christian, iwspo.net
Ahsan Murshed said…
thanks its pleasure for me.
Technology said…
Great post, I liked your way
Anonymous said…
HI, Good Work Dude.. But Inside panel,Image is not visible at page laoding time
Anonymous said…
If you don’t mind my asking, do you make good money from this blog?


amoksiklav dzhenerik
Ahsan Murshed said…
@amoksiklav dzhenerik
Its ok. No yet I do not make good money from this blog.....now I just want to share my practical knowledge with other developers for my self development. If there is any opportunity come to make money..... :)
Anonymous said…
You commit an error. I can defend the position. Write to me in PM, we will discuss.
Anonymous said…
hi, i tried to use this code on button click event but its not working.

Popular posts from this blog

The model backing the 'MyDBContext' context has changed since the database was created. Either manually delete/update the database, or call Database.SetInitializer with an IDatabaseInitializer instance. For example, the DropCreateDatabaseIfModelChanges strategy will automatically delete and recreate the database, and optionally seed it with new data.

How can I get a value of a property from an anonymous type (C#)

Check/Uncheck all items in a CheckBoxList using Javascript