If you want to use an animated gif within an ASP:Panel when using the ModalPopupExtender you might have noticed that there is an issue displaying this correctly in Internet Explorer. Everything will work as normal in IE except that if you look closely you should notice that the animated gif only runs through once. It doesn't continuously refresh the animation in Internet Explorer. Usually Modal Popups are used to display a friendly message to your users that the site is busy carrying out their request and the animation on a 'loading' graphic is a great way to give the impression that the site is site actually doing something.

I will include 2 examples that show how to get an animated gif working in an asp:panel - one in a page using MasterPages and another in a regular aspx page. If you didn't know how to get modalboxes working in asp.net you should pick up some tips from this article too (hopefully!). By the end of this example you will have a page with a ModalBox that is called when a submit button is clicked on. I will assume that you have ajax.net setup on your page using the ModalPopupExtender control and that you have the asp:ScriptManager at the top of your page.

My ASP:Panel looks something like the following. The main thing to note here is that I have given the <img> tag an id value. This id will be used by some javascript we will add shortly. I also have the panel CSS style set to none so it is hidden by default when the page is first loaded.

Saving details. Please Wait...

Next up we will setup our Submit button so that it will call our JavaScript when the user clicks on it.

The last part that is left for us to do is to add our javascript to our page. I have included 2 different versions of this code. The first option is for people using MasterPages - we need .net to tell our javascript code the correct name for the asp:Panel. The second option simply removes this code and has the asp:Panel name hard coded into the javascript.

JavaScript for use on MasterPage:

JavaScript for use on regular aspx page (no MasterPage setup):

The javascript above is doing 2 things. The first line in the function is telling the browser to show our asp:Panel which is telling the user that we are saving their details and to wait a moment. The second line is telling the browser to refresh the img src property after 200ms (the length of our animation). Without this line of code the animation would have just run through once and then stop animating. One thing to note if you are reading this article to gain an insight into modalboxes in asp.net is that you do not need to call a modalbox using javascript like I have done in this article. We only call the javascript because we needed to tell the browser to refresh our animated gif. If you just include the asp:ModalPopupExtender on your page and the asp:ScriptManager your modalbox should work ok for you.