Remove Bootstrap 5 Modal Background (backdrop) after close in ASP.Net using jQuery

Hi fahimahmed,

Refer below code.

HTML

<asp:Button ID="btnOpen" runat="server" Text="Open Popup" CssClass="btn btn-primary" OnClick="OnOpen" />
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
    aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">Mobile # verification</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <asp:TextBox ID="TextboxOTP" runat="server" CssClass="form-control" ValidationGroup="OTP" />
                <asp:RequiredFieldValidator ID="R7" runat="server" ErrorMessage="* Required " ForeColor="Red" ControlToValidate="TextboxOTP"
                    Display="Dynamic" SetFocusOnError="true" ValidationGroup="OTP" Font-Size="Small" />
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <asp:Button ID="VerifyOTP" runat="server" Text="Verify" CssClass="btn btn-primary" ValidationGroup="OTP" OnClick="VerifyOTP_Click" />
            </div>
        </div>
    </div>
</div>

Code

C#

protected void OnOpen(object sender, EventArgs e)
{
    VerifyOTP.Attributes["data-bs-dismiss"] = "modal";
    StringBuilder sb = new StringBuilder();
    sb.Append("<script type='text/javascript'>");
    sb.Append("$(function () {");
    sb.Append("$('#staticBackdrop').modal('show');");
    sb.Append("});");
    sb.Append("</script>");
    ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "myModalScript", sb.ToString(), false);
}

protected void VerifyOTP_Click(object sender, EventArgs e)
{
    StringBuilder sb = new StringBuilder();
    sb.Append("<script type='text/javascript'>");
    sb.Append("$(function () {");
    sb.Append("$('#staticBackdrop').modal('show');");
    sb.Append("});");
    sb.Append("</script>");
    if (TextboxOTP.Text == "123")
    {
        ScriptManager.RegisterClientScriptBlock(this.Page, this.Page.GetType(), "alert", "alert('Your order has been placed successfully');", true);
    }
    else
    {
        ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "alert", "alert('Wrong OTP');", true);
        ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "myModalScript", sb.ToString(), false);
    }
}

VB.Net

Protected Sub OnOpen(ByVal sender As Object, ByVal e As EventArgs)
    VerifyOTP.Attributes("data-bs-dismiss") = "modal"
    Dim sb As StringBuilder = New StringBuilder()
    sb.Append("<script type='text/javascript'>")
    sb.Append("$(function () {")
    sb.Append("$('#staticBackdrop').modal('show');")
    sb.Append("});")
    sb.Append("</script>")
    ScriptManager.RegisterClientScriptBlock(Me, Me.GetType(), "myModalScript", sb.ToString(), False)
End Sub

Protected Sub VerifyOTP_Click(ByVal sender As Object, ByVal e As EventArgs)
    Dim sb As StringBuilder = New StringBuilder()
    sb.Append("<script type='text/javascript'>")
    sb.Append("$(function () {")
    sb.Append("$('#staticBackdrop').modal('show');")
    sb.Append("});")
    sb.Append("</script>")

    If TextboxOTP.Text = "123" Then
        ScriptManager.RegisterClientScriptBlock(Me, Me.GetType(), "alert", "alert('Your order has been placed successfully');", True)
    Else
        ScriptManager.RegisterClientScriptBlock(Me, Me.GetType(), "alert", "alert('Wrong OTP');", True)
        ScriptManager.RegisterClientScriptBlock(Me, Me.GetType(), "myModalScript", sb.ToString(), False)
    End If
End Sub

 Or use this.

<script type="text/javascript">
    function pageLoad() {
        $('[id*=VerifyOTP]').click(function () {
            $("[class*='modal-backdrop fade show']").remove();
        });
    }
</script>