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

Last Reply one month ago By dharmendr

Posted one month ago

Bootstrap 5 modal popup close from code behind wokring fine but after validation it fade page with below class

<div class="modal-backdrop fade show"></div>

<!-- Modal -->
<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"  />
            </div>
         </div>
     </div>
</div>

 

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js"></script>

 

If TextboxOTP.Text = "123" Then
    ScriptManager.RegisterClientScriptBlock(Me.Page, Me.Page.[GetType](), "alert", "alert('Your order has been placed successfully');", True)
Else
    ScriptManager.RegisterClientScriptBlock(Me.Page, Me.Page.[GetType](), "alert", "alert('Wrong OTP');", True)
    VerifyOTP.Attributes("Data-bs-dismiss") = "staticBackdrop"
    Dim sb As System.Text.StringBuilder = New System.Text.StringBuilder()
    sb.Append("<script type='text/javascript'>")
    sb.Append("$('#staticBackdrop').modal('show');")
    sb.Append("</script>")
    ScriptManager.RegisterClientScriptBlock(Me, Me.[GetType](), "myModalScript", sb.ToString(), False)
End If

 

Posted one month ago
Hi @fahimahmed,
Please try the following

Bootstrap Modal Popup not opening on LinkButton Click from code behind in ASP.Net

It might help you.

Cheers Andrea.

Posted one month ago Modified on one month ago

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>