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

【问题标题】：How to show modal in bootstrap 5 on asp.net如何在 asp.net 上的 bootstrap 5 中显示模态
【发布时间】：2021-11-01 19:35:21
【问题描述】：

升级到 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>

【问题讨论】：

从模态框内移除 UpdatePanel
那不行

标签： c# asp.net bootstrap-5

【解决方案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>

【讨论】：