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 ?
tanks
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 Im 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.
You're a life-saver. This bug was driving me nuts.
There is a "bug" that only appears in Firefox that is somewhat related to this. Once the modal is shown and dismissed, refreshing the page or navigating away from the page flashes the previously displayed modal.
The workaround I've found for this is to put script in in the OnCancelScript (and/or OnOkScript) that sets the PopupControlID control's style.display = "none" again.
I am doing the same but for me it does not work out the way its specified out here...
Thank you, it is a solution. As long as you do not have to postback from the modal control. I tried to insert a validation in my modal popup control but no validation was performed when display:none is set.
I would like to have a solution where I can use the modal popup extender without the flickering and where button click actions and validation inside the modal popup work.
I suppose I have to use OnOkScript.