Bootstrap 5 模式不显示 ASP.NET答案

【问题标题】：Bootstrap 5 modal is not showing ASP.NETBootstrap 5 模式不显示 ASP.NET
【发布时间】：2023-01-17 00:05:46
【问题描述】：

单击按钮触发模态引导程序时，我收到错误消息。我知道我应该能够在没有任何额外的 javascript 的情况下打开和关闭模式。

索引.cshtml

<button class="rectangle-button-lg button-grey" data-bs-toggle="modal" data-target="#normalModal">Normal</button>


<div class="modal fade" id="normalModal" tabindex="-1" aria-labelledby="normalModal" aria-describedby="Normal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header ref-modal-header">
                <button type="button" class="close"
                        data-dismiss="modal">
                    &times;
                </button>
                <h4 class="modal-title ref-modal-title">
                    Please Read!
                </h4>
            </div>
            <div class="modal-body ref-modal-body">
                <p>Before you start please ensure to following the instructions</p>
            </div>
        </div>

    </div>
</div>

_Layout.cshtml

<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<body>    
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
    <script type="text/javascript" src="https://cdn.datatables.net/v/bs5/dt-1.13.1/r-2.4.0/datatables.min.js"></script>
    <script src="~/lib/animate/wow.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
</body>

【问题讨论】：

标签： javascript jquery asp.net-mvc bootstrap-modal bootstrap-5

【解决方案1】：

改变这个...

<button class="rectangle-button-lg button-grey" data-bs-toggle="modal" data-target="#normalModal">Normal</button>

...对此。

<button class="rectangle-button-lg button-grey" data-bs-toggle="modal" data-bs-target="#normalModal">Normal</button>

【讨论】：