In this article I will explain how to stop ASP.Net AJAX Control Toolkit Modal Popup Flickering i.e. ASP.Net AJAX Modal Popup shows for some seconds and then disappears on PostBack.
Cause
The truth is that we see the ASP.Net AJAX Modal Popup Panel and not the Modal Popup.
ASP.Net AJAX Modal Popup is associated with a Panel control. The Panel control is by default visible and when the Page is loaded completely in browser then the Panel control is hidden using AJAX Control Toolkit JavaScript.
Due to this sometimes we see the AJAX Modal Popup Panel when the page is rendering in the browser and it hides when the page load is completed.
Solution
The AJAX Control Toolkit JavaScript sets display CSS style to none. We can also do the same by setting this style to the Panel control so that it is hidden by default.
This prevents the ASP.Net AJAX Modal Popup flickering on PostBack.
<asp:ToolkitScriptManager ID="ScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:Button ID="btnShow" runat="server" Text="Show Modal Popup" />
<!-- ModalPopupExtender -->
<cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panel1" TargetControlID="btnShow"
CancelControlID="btnClose" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" align="center" style = "display:none">
This is an ASP.Net AJAX ModalPopupExtender Example<br />
<asp:Button ID="btnClose" runat="server" Text="Close" />
</asp:Panel>
<!-- ModalPopupExtender -->
Demo
