如何在 asp.net 上的 bootstrap 5 中顯示模態

Question

升級到 Bootstrap 5 后，所有模式窗口都不起作用。 有沒有人有任何提示？ 我嘗試將命名空間 data-dismiss 更改為 data-bs-dismiss 但仍然無法正常工作。 非常感謝。

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

假設您的模態的 id 為“Modal1”，我假設您使用 jQuery 來顯示模態，如下所示：

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

在 C# 中，一個 asp.net 按鈕會像這樣調用 javascript 函數：

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

你只需要一個不同的 javascript 函數：

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