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>

TrackBack

TrackBack URL for this entry:
http://mattberseth.com/blog-mt/mt-tb.fcgi/51

Listed below are links to weblogs that reference How To: Stop the ModalPopup Flicker:

» August 2nd Links: ASP.NET AJAX and the ASP.NET AJAX Control Toolkit from Blogs
Here is the latest in my semi-regular link-listing series . Today's links are all about ASP.NET AJAX [Read More]

» August links from With the lights out
Some useful links grouped by category Asp.net and AJAX.net Matt Berseth : cool blog with lot of Ajax [Read More]

» August links from With the lights out
Some useful links grouped by category Asp.net and AJAX.net Matt Berseth : cool blog with lot of Ajax [Read More]

» August links from With the lights out
Some useful links grouped by category Asp.net and AJAX.net Matt Berseth : cool blog with lot of Ajax [Read More]

» August links from With the lights out
Some useful links grouped by category Asp.net and AJAX.net Matt Berseth : cool blog with lot of Ajax [Read More]

» August links from With the lights out
Some useful links grouped by category Asp.net and AJAX.net Matt Berseth : cool blog with lot of Ajax [Read More]

Comments


Posted by: Nubes on August 13, 2007 12:00 AM

That trick is awesome, it resolved similar problem with PopupControl used in combination with ModalPopup. Thanks!

Posted by: Dogan Ugurlu on August 16, 2007 12:00 AM

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.

Posted by: Marcus on September 29, 2007 12:00 AM

Thanks!
This problem had been bugging me for ages on some PopupControlExtender controls that I was using for popup help messages

Posted by: max on November 4, 2007 12:00 AM

sorry,
but How To: Stop the ModalPopup Flicker ?

tanks

Posted by: M N Feuersteiner on November 8, 2007 12:00 AM

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.

Posted by: animesh on December 4, 2007 12:00 AM

T.G finally flickering has stopped....

Posted by: ravichandran on December 28, 2007 12:00 AM

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

Posted by: Gerard on March 5, 2008 12:00 AM

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.

Posted by: Andrew on May 4, 2008 12:00 AM

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.

Posted by: Universalkida on October 6, 2008 05:45 AM

I am doing the same but for me it does not work out the way its specified out here...

Posted by: Mikael Larsson on October 7, 2008 04:56 AM

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.

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)

Consulting Services

Yep - I also offer consulting services. And heck, I'll do just about anything. If you enjoy my blog just drop me an email describing the work you need done.

Recent Comments

  • Mikael Larsson wrote: Thank you, it is a solution. As long as you do not have to postback from the modal control. I tried ...
  • Universalkida wrote: I am doing the same but for me it does not work out the way its specified out here......
  • Chris wrote: There is a "bug" that only appears in Firefox that is somewhat related to this. Once the modal is s...
  • Brian Lowry wrote: You're a life-saver. This bug was driving me nuts....
  • Andrew wrote: Hey THANK YOU very much for this bit of help. Not only did it stop the annoying flicker, but since I...
  • Gerard wrote: Matt, Appreciate your time and effort in sharing your findings in a clear and precise manner. I se...
  • ravichandran wrote: when i use the above script without master page it works well. but when i use with master it shows ...
  • animesh wrote: T.G finally flickering has stopped.... ...