.NET Nugget: Modal Popup Extender Flicker (Saturday, November 14, 2009 7:30:00 PM)
Thought I'd share this nifty little .NET finding I came across tonight. Been coding through a cold here, so excuse me if my grammar is a little ... how shall I say?
**## Nyquil !!!!!.
Yeah, that's the good stuff. Anyways, on to the info.
The AJAX Control Toolkit is pretty much the coolest thing since sliced bread (or
Orb, which is also the coolest thing since sliced bread. Thats' 2 things. Take that bakers.) I've been using little bits and pieces of it for the last 2 years now, and one of them I hadn't actually tested yet was the ModalPopupExtender.
This control should extend an asp:Panel (or div, whatever) to popup in a "modal" fashion when a certain button is clicked, then disappear when the user responds to the modal popup.
My problem, and apparently
everyone else's was that upon submitting information within the modal popup, I'd get this hideous flicker of the popup panel during the postback. I'm not talking a minor distraction here either. It's all mispositioned and scattered across the page for a good half second during the postback.
My initial thought was to hard code a "display:none" into the panel control. Through my searching of this problem later on I found that another guy named
Matt Berseth had used this same method and gotten rid of the flicker. Unfortunately, this didn't work for me.
I tried other things like a client side script to turn the visibility on/off for the panel: no luck. I tried changing from a panel to a div. I tried turning off my stylesheet to make sure that wasn't causing a problem. Still, no dice.
Finally though, I found the problem:
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" DropShadow = "true" PopupControlID="popupDiv" TargetControlID="btn_createAcct" CancelControlID="btn_cancel" >
Are you thinking what I'm thinking? Yes, a dropshadow would be an entirely separate panel laying below the panel I'm working with. That's what the problem was.
.NET renders your normal div or asp:Panel named "kevinPanel" like this now:
<div id="ModalPopupExtender1_foregroundElement" style="position: fixed; z-index: 100001; left: 304.5px; top: 268.5px;">
<div id="kevinPanel" style="background-color: rgb(192, 192, 255); height: 306px; width: 671px; visibility: visible; position: relative; z-index: 2;">
</div>
<div id="kevinPanel_DropShadow" style="background-color: black; position: absolute; left: 5px; top: 5px; width: 671px; height: 306px; visibility: visible; z-index: 1;"/>
</div>
<div id="ModalPopupExtender1_backgroundElement" style="position: fixed; left: 0px; top: 0px; z-index: 10000; width: 1280px; height: 843px;"/>
...and that causes some sort of problem. I'm wondering if maybe I could make a CSS class or two to handle those dynamically created shadow panels, but I don't fucking care, because I'll make my own shadow with a png. Not only does the built-in shadow look like shit, but it breaks the ModalPopup.
So there: don't use the DropShadow and do still use Matt Berseth's technique of hard coding the "display: none" style into the panel tag.
Back to Nyquil.