我是新的 Bootstrap 。我试图写一个基本的CRUD页面与用户系统使用PHP，MySQL和Bootstrap。CRUD页面有一个按钮来添加新产品，和一个表来显示所有的产品详细信息创建此用户。
我遇到的bug是与“添加新产品”按钮有关。一旦我点击它，模态应该会弹出，并要求输入详细信息。我发现，如果用户已经在数据库中存储了产品，模态将按预期工作。但是，如果用户还没有发布任何产品，点击按钮将不会打开模态，但会导致此错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'backdrop') modal.js:158
    at Ni._initializeBackDrop (modal.js:158:39)
    at new Ni (modal.js:69:27)
    at Ni.getOrCreateInstance (base-component.js:65:41)
    at HTMLButtonElement.<anonymous> (modal.js:363:22)
    at HTMLDocument.n (event-handler.js:118:19)

字符串
我搜索并尝试了几种解决方案，但没有一种解决办法。例如，在结尾之前包含bootstrap的js，如果modal在其中，则删除条件子句，降级bootstrap版本，.
当我查看跟踪错误（modal.js）时：

// Private
  _initializeBackDrop() {
    return new Backdrop({
      isVisible: Boolean(this._config.backdrop), // 'static' option will be translated to true, and booleans will keep their value,
      isAnimated: this._isAnimated()
    })
  }

型
我的代码触发模态：

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addModal">
    Add a new product
</button>

型
模态：

<div class="modal fade" id="addModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
     aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="staticBackdropLabel">Add a new product</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="post" action="manageProduct.php">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="name" class="form-label">Product Name</label>
                        <input type="text" class="form-control" id="name" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label for="price" class="form-label">Sale Price</label>
                        <input type="number" class="form-control" id="price" min="0.01" step=".01" name="price"
                               required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary" name="addProduct" value="Add Product">Add Product</button>
                </div>
            </form>
        </div>
    </div>
</div>

型
manageProduct.php:

if (isset($_POST['addProduct'])) {
        try {
            $sql = "insert into sells (name, username, price) 
                            values (:name, :username, :price)";
            $stmt = $pdo->prepare($sql);
            $stmt->execute(array(
                ':name' => $_POST['name'],
                ':username' => $user,
                ':price' => $_POST['price']);
            $_SESSION['success'] = 'Product added successfully!';
        }
        catch(PDOException $e){
            $_SESSION['error'] = 'Failed to add your product!';
        }
}

型
我的bootstrap版本：

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
        crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.7.0.js"
        integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>

型