Monday, March 22, 2010

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>

7 comments:

Unknown 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

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

Method 'StartWorkflowOnListItem' in type 'Microsoft.SharePoint.WorkflowServices.FabricWorkflowInstanceProvider'

Exception: Method 'StartWorkflowOnListItem' in type 'Microsoft.SharePoint.WorkflowServices.FabricWorkflowInstanceProvider'...