如何在 asp.net 上的 bootstrap 5 中显示模态

Question

After upgrade to the Bootstrap 5 all of modal window not working. Does anyone have any tips? I tried change namespace data-dismiss to data-bs-dismiss but still not working. Thanks a lot.

protected void showmodal(object sender, EventArgs e)
{
    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$('#myModal').modal({backdrop: 'static', keyboard: false});", true);
    upModal.Update();
}

<div class="d-grid gap-2 pb-2 px-2">
<asp:Button runat="server" ID="ShowModal" OnClick="showmodal" UseSubmitBehavior="false" Text="TEST MODAL" CssClass="btn" data-bs-toggle="modal" data-bs-target="#myModal" />
</div>

<!-- Bootstrap Modal Dialog -->
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
            <ContentTemplate>
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-bs-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">
                            <asp:Label ID="Label5" runat="server" Text=""></asp:Label>
                        </h4>
                    </div>
                    <div class="modal-body">
                        <asp:Label ID="Label6" runat="server" Text=""></asp:Label>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-info" data-bs-dismiss="modal" aria-hidden="true">Close</button>
                    </div>
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
</div>

Answer 1

Assuming your modal has an id of "Modal1", I assume you used jQuery to display the modal like this:

<script type="text/javascript">
    function openModal1() {
    $('#Modal1').modal('show');
    }
</script>

In C#, an asp.net button would call the javascript function like this:

protected void Button1_Click(object sender, EventArgs e)
    {
        ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "openModal1();", true);
    }

You just need a different javascript function:

<script type="text/javascript">
    function openModal1() {
        var myModal = new bootstrap.Modal(document.getElementById('Modal1'), { keyboard: false });
        myModal.show();
    }
</script>