ASP.NET ModalPopupExtender Appears When Calling Alert JavaScript Function

Question

I encountered a behavior error from the ASP.NET Ajax Controls Toolkit ModalPopupExtender, when I call Alert() the JavaScript function from the server side, the modality appears in the background. I do not know why this is happening.

here is the code:

B. B:

 Sub ShowAlert(ByVal message As String) ScriptManager.RegisterStartupScript(Me.UpdatePanel, UpdatePanel.GetType(), "notificationScript", "<script language='JavaScript'> alert('" & message & "'); </script>", False) End Sub 

Aspx:

 <asp:UpdatePanel ID="UpdatePanel" runat="server"> <ContentTemplate> <asp:Panel ID="pnlPartialInstructions" CssClass="modal" runat="server"> ...... <asp:Panel ID="pnlPrintConfirmation" CssClass="modal" runat="server"> <table class="ui-accordion"> <tr> <td colspan="2"> <asp:Label Text="Do you want to print the receipt?" ID="lblPrintConfirmation" runat="server" meta:resourcekey="lblPrintConfirmationResource1" Font-Bold="True" Font-Names="tahoma" Font-Size="Large" /> </td> </tr> <tr> <td> <asp:Button ID="btnConfirmPrint" Text="Yes" CssClass="google-button google-button-blue" runat="server" meta:resourcekey="btnConfirmSaveResource1" Font-Size="Large" /> </td> <td> <asp:Button ID="btnCancelPrint" Text="No" CssClass="google-button google-button-red" runat="server" meta:resourcekey="btnCancelSaveResource1" Font-Size="Large" /> </td> </tr> </table> </asp:Panel> <asp:Button ID="HiddenForModel1" Text="" runat="server" CssClass="hide" CausesValidation="False" /> <ajaxToolkit:ModalPopupExtender ID="pnlPrintConfirmation_ModalPopupExtender" runat="server" DynamicServicePath="" Enabled="True" TargetControlID="HiddenForModel1" PopupControlID="pnlPrintConfirmation" BackgroundCssClass="ModalBackground" DropShadow="True" CancelControlID="btnCancelPrint" RepositionMode="RepositionOnWindowResizeAndScroll"> </ajaxToolkit:ModalPopupExtender> ..... </asp:UpdatePanel> </ContentTemplate> 

Answer 1

The problem is caused by how ModalPopupExtender works. It emits JavaScript that will hide the Panel .

Now you register your alert() call as a script run, it will run under the control of the ModalPopupExtender script until the user exits the notification window. The simplest fix is ​​to set display:none on the Panel , so it won’t need a script to hide it:

 <asp:Panel ID="pnlPrintConfirmation" CssClass="modal" Style="display:none;" runat="server"> ... </asp:Panel>