User Id :    Password :      New Member   Forgot Password  
 
How to show Page loading progress with modal background
Description How to show Page loading progress with modal background   No. of Views     1861
  Rating     0
Author Ahsan Murshed   Posted On     15 Jul 2010
Tags ASP.NET,C#,Java Script,HTML,Style Sheet    

Sample Code   Download Code

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:





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
 

About Author

About Author I am working as Software engineer having 4+ years of experience in Microsoft Technologies, System Design and Integration and deployment, Search Engine Optimization (SEO). I have developed web based application in asp.net/C# and database design. My Site: http://www.dotnetboss.com My blog: http://aspboss.blogspot.com Ahsan
No Photo
 
Country N/A
Company N/A
Home Page N/A

Rate this article

Rating options from poor, fair, good, very good to excelent.  
 

Comments

 
 
Posted By Ahsan Murshed on 08 Oct 2010 at 11:46 PM
 
place the following code into your code behind page.. protected override void OnInit(EventArgs e) { base.OnInit(e); Panel1.Visible = true; }
 
 
 
Posted By K.Mohan Kumar on 13 Sep 2010 at 06:35 PM
 
This code doesn't work for me..After the compilation..in the browser just the ajax animation image launches..Can you provide me the code which should satisfy the following condition. First,when a page loads..in that gap this image should appear..After the page gets loaded,this image should disappear..This image should be placed at the center of the screen before the page gets loaded.. Please help me guys to find out a better solution to my problem!!!
 
 
   
Write your comment here.
Comment
Verification Code