How To: Stop the ModalPopup Flicker
In the web application I am currently working on I use the ModalPopupExtender control in a handful of places. When I first added it to a page, I noticed the browser (tested in both IE and FireFox) would display the contents of the popup for a split second before hiding it. In IE, the popup contents is visible long enough that I was able to snag a screen shot of it in only 3 tries (in the screen shot below, 'Hi' is supposed to be displayed in the popup when the button is clicked).
Demo With Flicker | Demo Without Flicker
To get around this, I explicitly set the display style to 'none' on the popup Panel. This has solved the problem.
<asp:Panel ID="pnlPopup" runat="server" style="display:none"> Hi </asp:Panel>
Here is the sample code ...
<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>Untitled</title> <style> .modalBackground { background-color:Gray; filter:alpha(opacity=60); opacity:0.60; } </style> </head> <body> <form id="frm" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <div> <p style="background-color:AliceBlue; width:95%"> No flicker this time? Try refreshing the page again ... </p> <br /> <asp:Button runat="server" Text="Show Popup" OnClientClick="$find('mdlPopup').show(); return false;" /> <ajaxToolKit:ModalPopupExtender ID="mdlPopup" runat="server" TargetControlID="pnlPopup" PopupControlID="pnlPopup" BackgroundCssClass="modalBackground" /> <asp:Panel ID="pnlPopup" runat="server" style="display:none"> Hi </asp:Panel> </div> </form> </body> </html>
Comments
That trick is awesome, it resolved similar problem with PopupControl used in combination with ModalPopup. Thanks!
Thanx for the tip. It was really annoying before i found this page out.
Another thing that might be useful. It does not work when "display:none" is in an externally included stylesheet file. Stylesheet can still be used but the "display:none" should be in the tag.
Thanks!
This problem had been bugging me for ages on some PopupControlExtender controls that I was using for popup help messages
sorry,
but How To: Stop the ModalPopup Flicker ?
tank's
Brilliant! Works with Modal and PopupExtender. One of the most useful posts!! This flickering has bugged me for quite a while. Thanks for providing the info.
T.G finally flickering has stopped....
when i use the above script without master page it works well.
but when i use with master it shows the panel at the left top corner of the page.
I have pasted the script here. more over i want to show the panel during page load.
///
Selection Criteria - Airctaft Trips
Font-Bold="true">
Font-Size="8pt" MaxLength="5">
font-weight: bold" />
font-weight: bold" />
BackgroundCssClass="modalpopupBackground" />
///
please let me know how to rectify this.
regards
ravi
Matt,
Appreciate your time and effort in sharing your findings in a clear and precise manner.
I seem to land here a lot on doing my 'trial and error' learning curve on ASP.net and AJAX.
Your now 'favorited'.
Thanks again, I was looking for a solution on this matter, seems a MS bug.
Gerard.
Hey THANK YOU very much for this bit of help. Not only did it stop the annoying flicker, but since I'm using the ModalPopupExtender to display larger expanded images in a gallery, the larger image was wrecking my layout on the first load of the page. After about 3 hours of fiddling, your solution fixed the problem!!!
Thanks again.