How to stop ModalPopupExtender flickering on pageload in .NET


Information

 If we use the ModalPopupExtender of  Ajax Control Toolkit we may run into flickering issue i.e. the content of ModalPopupExtender shows up for a moment during the page load and then disappears, while it should not be displayed on the page load.

To solve this problem we have to set up display property 'none' on the pop-up control.As the content of the panel will be shown as popup we have to set the required style there.
<asp:Panel ID="pnlPicture" runat="server" CssClass="modalPopup"  Style="display:none;"/>
   Now ModalPopupExtender will work perfect for IE but may not work for Firefox. In page load the Modal Popup will not flicker but on a postback or if the page being redirected by a Response.Redirect the Modal Popup will flash. For that we have to set up the style with javascript.

function getFlickerSolved()
{
    document.getElementById('<%=pnlPicture.ClientID%>').style.display = 'none';
}

And we have to call this javascript function on onOkScript/onCancelScript of modalpopupextender or just before the page load.
Code:
 
<asp:LinkButton ID="lbtnChangePhoto" runat="server" Text="Edit" ToolTip="Edit Picture">
</asp:LinkButton>    <!-- Clicking on this button The Modalpopup will open -->

<asp:Panel ID="pnlPicture" runat="server" CssClass="modalPopup" Style="display:none;">
    <p>
        <asp:FileUpload ID="photoUpload" runat="server" />
    </p>
    <p>
        <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" onClientClick="getFlickerSolved();/>"
        <asp:Button ID="btnHidePopup" runat="server" Text="Cancel" />
    </p>
</asp:Panel> <!-- The content of this panel will appear as popup -->

 <cc1:ModalPopupExtender ID="modalPopupChangePicture" TargetControlID="lbtnChangePhoto"PopupControlID="pnlUploadPicture" runat="server"
BackgroundCssClass="modalPopupBackgroundStyle" CancelControlID="btnHidePopup"onCancelScript="getFlickerSolved();">
</cc1:ModalPopupExtender>


 Note: It may not work when "display:none" is in an external stylesheet .It should be in the  Tag.


0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)