解决Bootstrap模态框无法打开：属性配置与依赖引入详解

<!-- 模态框 -->
<div class="modal" id="Modal1">
    <!-- ... 模态框内容 ... -->
</div>

<!-- 触发按钮（此处id非必需，但保留也无妨） -->
<button type="button" class="btn btn-primary" id="openModalButton">
    Satış Yap
</button>

<!-- 适用于 Bootstrap 3 或 Bootstrap 4 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Modal1">
    Satış Yap
</button>

<!-- 如果您的项目使用的是 Bootstrap 5 及更高版本，请使用 data-bs-toggle 和 data-bs-target -->
<!-- <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#Modal1">
    Satış Yap
</button> -->

<!-- 适用于 Bootstrap 4 的 CDN 引入顺序 -->
<!-- 1. 引入 jQuery (Bootstrap 3/4 必需) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<!-- 2. 引入 Popper.js (Bootstrap 4 必需) -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<!-- 3. 引入 Bootstrap JavaScript Bundle (Bootstrap 4 必需，包含所有组件) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>

<!-- 如果是 Bootstrap 5 及更高版本，则无需 jQuery 和 Popper.js，只需引入其自身的 JS 文件 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> -->

@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/MainLayout.cshtml";
}

<h1>Satışlar Sayfası</h1>

<!-- 触发模态框的按钮 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Modal1">
    Satış Yap
</button>

<!-- 模态框定义 -->
<!-- 添加了 fade 类用于动画效果，tabindex、role、aria-labelledby、aria-hidden 用于可访问性 -->
<div class="modal fade" id="Modal1" tabindex="-1" role="dialog" aria-labelledby="Modal1Label" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title" id="Modal1Label">Satış Yapma Ekranı</h2>
                <!-- 添加关闭按钮 -->
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form>
                <div class="modal-body">
                    <label>Ürün Adı</label>
                    <input type="text" name="Urun" class="form-control" />
                    <br />
                    <label>Ürün Markası</label>
                    <input type="text" name="marka" class="form-control" />
                    <br />
                    <label>Müşteri Adı Soyadı</label>
                    <input type="text" name="musteri" class="form-control" />
                    <br />
                    <label>Müşteri Telefonu</label>
                    <input type="text" name="telefon" class="form-control" />
                    <br />
                    <button class="btn btn-info">Verileri Kaydet</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 确保在body结束标签前引入所有必要的JavaScript文件 -->
<!-- 适用于 Bootstrap 4 的 CDN 引入顺序 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>

<!-- 如果是 Bootstrap 5，则无需 jQuery 和 Popper.js -->
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> -->

<!-- 移除所有自定义的模态框打开JavaScript，因为Bootstrap已通过data-*属性处理 -->
<!-- $(document).ready(function(){
  $("#openModalButton").click(function(){
    $("#Modal1").modal();
  });
}); -->