Django模板中Bootstrap Modal无法弹出 移除表格后功能恢复

问题根因&解决方法 #

1. Bootstrap版本与属性不匹配

你引入的是Bootstrap 4.3.1版本，但代码里控制modal的属性用的是Bootstrap 5专属的带bs前缀的属性，Bootstrap 4无法识别这类属性，所以点击无响应。
需要修改两处属性：

• 触发modal的按钮：把data-bs-toggle改成data-toggle，data-bs-target改成data-target

  <!-- 修改前 -->
  <button type="button" class="icon-only-button" data-bs-toggle="modal" data-bs-target="#exampleModal">
  <!-- 修改后 -->
  <button type="button" class="icon-only-button" data-toggle="modal" data-target="#exampleModal">
  

• modal内部的关闭按钮：把data-bs-dismiss改成data-dismiss，同时Bootstrap 4的关闭按钮类为close，需要替换原有类名并补充关闭符号

  <!-- 修改前 -->
  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  <!-- 修改后 -->
  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  

2. HTML结构不符合规范

你将搜索用的<form>直接放在了<tr>标签内部，而<tr>的合法子元素只能是<th>或<td>，不符合规范的结构会导致浏览器解析DOM异常，元素绑定的事件失效，这也是你删除表格后modal就能正常触发的核心原因。
需要把<form>移到<th>内部：

<!-- 修改前 -->
<tr class="search">
  <form method="GET" name="search">
    <th scope="row">
      <input name="search" type="search" placeholder="Search.." value="{{ search_text }}">
    </th>
  </form>
  <td>
    <!-- 触发按钮代码 -->
  </td>
</tr>

<!-- 修改后 -->
<tr class="search">
  <th scope="row">
    <form method="GET" name="search">
      <input name="search" type="search" placeholder="Search.." value="{{ search_text }}">
    </form>
  </th>
  <td>
    <!-- 触发按钮代码保持不变 -->
  </td>
</tr>

完成以上修改后Modal即可正常弹出。

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