Can't open Bootstrap 5 Modal from ASP.NET Code-behind-CodePudding

I have reviewed many previous questions on this but haven't found anything that works. I have an ASP.NET web application project, and I would like to use a Bootstrap 5 modal to display messages when the user needs to correct something during account registration. Part of the reasoning for this is because some of the logic for creating an account must run server-side, so doing everything via JavaScript is not really an option.

My modal code is defined as follows:

<div  id="ErrModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
   <div >
        <div >
            <div >
                <h5  id="staticBackdropLabel">Please Correct...</h5>
                <button type="button"  data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div >
                <asp:Label ID="lblMsg" CssClass="h5" runat="server"></asp:Label>
            </div>
            <div >
                <button type="button"  data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

I have client-side script code added as follows:

function openModal() {
   $('#ErrModal').modal('show');
}

And finally, in my ASP.NET code-behind, I attempt to display the modal using this code:

lblMsg.Text = ex.StatusCode.ToString ( );
ClientScript.RegisterStartupScript ( this.GetType ( ), "Pop", "openModal();", true );

When I do something to deliberately cause the code for displaying the modal to execute, it doesn't pop up, and I get the error "Uncaught ReferenceError: openModal is not defined" in the Chrome console.

What am I doing wrong here?

CodePudding user response：

Most probably script runs even before page is loaded completely.

Reference