模态框报错：Uncaught TypeError: Cannot read property 'classList' of null 求排查

报错 Uncaught TypeError: Cannot read property 'classList' of null 本质是Bootstrap初始化模态框时找不到预期的DOM元素，根源在于你的模态框HTML结构存在语法错误和规范问题，以下是具体问题和修复方法：

1. HTML标签未正确闭合 #

模态框代码中有多处标签缺少闭合符号 >，导致DOM结构解析混乱，Bootstrap无法识别模态框的正确结构：

• <div class="modal-content"> 的闭合标签 </div → 改为 </div>
• <div class="modal-dialog ..."> 的闭合标签 </div → 改为 </div>
• 最外层 <div class="modal"> 的闭合标签 </div → 改为 </div>

2. 模态框结构不符合Bootstrap规范 #

Bootstrap模态框的正确层级结构为：modal → modal-dialog → modal-content → modal-header/modal-body/modal-footer

你的 modal-footer 放在了 modal-content 外部，这会导致Bootstrap初始化时无法定位到正确的内部元素，触发报错。需要将 modal-footer 移入 modal-content 内部。

修复后的模态框代码示例：

<div class="modal" id="ModalAccept{{ $item->id }}"
  tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
   <div class="modal-content">
    <form action="{{ route('car-lending.accept', $item->id) }}"                                                    
     id="formAcceptDireksi{{ $item->id }}">
      <!-- 可在此添加表单内容，如隐藏域传递参数 -->
    </form>
    <!-- 将footer移入modal-content内 -->
    <div class="modal-footer">
      <button type="button"
        class="btn btn-sm badge badge-success"
        style="cursor: pointer"
        id="DireksiAccept{{ $item->id }}">Accept</button>
    </div>
   </div> <!-- 正确闭合modal-content -->
  </div> <!-- 正确闭合modal-dialog -->
</div> <!-- 正确闭合modal -->

3. JavaScript选择器语法错误 #

你的JS代码混合了PHP与JS的字符串拼接逻辑，在Blade模板中需直接用Blade语法注入$item->id，否则生成的选择器无效：
错误写法：

$("#DireksiAccept'.$item->id.'").on("click", function (e) {
    // ...
    $("#formAcceptDireksi'.$item->id.'").submit();
})

修复为：

$("#DireksiAccept{{ $item->id }}").on("click", function (e) {
    e.preventDefault();
    // 若需要获取id，需给按钮添加data-id="{{ $item->id }}"属性
    let id = $(this).data("id");
    Swal.fire({
        title: "Are you sure?",
        text: "You wont be able to revert this!",
        icon: "warning",
        showCancelButton: true,
        confirmButtonColor: "#3085d6",
        cancelButtonColor: "#d33",
        confirmButtonText: "Accept!"
    }).then((result) => {
        if (result.isConfirmed) {
            $("#formAcceptDireksi{{ $item->id }}").submit();
        }
    })
});

额外优化点 #

• 将提交按钮的type改为button，避免默认submit行为与JS逻辑冲突
• 若表单无内容，建议添加隐藏域传递$item->id，确保路由参数正常接收

内容的提问来源于stack exchange，提问作者slvhxia