如何确定 Bootstrap 5 Modal 按钮不起作用的原因？

Question

我有一个基于 Django 的网站，使用 bootstrap 5。我有一个数据表和一个包含大量文本的注释列。我正在尝试使用 Bootstrap Modal 弹出功能来显示注释以保持表格较小。长注释文本使表格难以阅读。当我说长笔记时，我指的是大约 15-25 个单词。

当我单击“阅读注释”按钮时，不会出现模式。

我的html：

    {% for f in flights %}
      {% for flight in f.flight_data %}
            <!-- Modal -->
        <div class="modal fade" id="{{ flight.flight_id }}" tabindex="-1" role="dialog" aria-labelledby="{{ flight.flight_id }}Label" aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="{{ flight.flight_id }}Label">Notes for the flight of the {{ flight.name }}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                {{ flight.notes|safe }}
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <!--<button type="button" class="btn btn-primary">Save changes</button>-->
              </div>
            </div>
          </div>
        </div>  
      {% endfor %}
   {% endfor %}
   
    {% for f in flights %}
      <div class="row mt-4">
        <div class="col-12">
          <div class="card mb-4">
            <div class="card-header pb-0">
              <p class="mb-1 pt-2 text-bold">{{ f.date }}</p>
              <h5 class="font-weight-bolder">{{ f.teacher_name }}</h5>
            </div>
            <div class="card-body px-0 pt-0 pb-2">
              <div class="table-responsive p-0">
                <table class="display" id="models" style="width:100%">
                  <thead>
                  <tr class="text-center mb-0 text-lg font-weight-bold">
                      <th rowspan="2">Rocket Name</th>
                      <th rowspan="2">Mission Specialists</th>
                      <th rowspan="2">Flight Engineers</th>
                      <th rowspan="2">Type</th>
                      <th colspan="1">Lift-off Weight</th>
                      <th colspan="2">Altitude</th>
                      <th rowspan="2">Egg</th>
                      <th rowspan="2">Shockcord</th>
                      <th rowspan="2">Nose cone</th>
                      <th rowspan="2">Coupler</th>
                      <th rowspan="2">Parachute</th>
                      <th rowspan="2">Notes</th>
                  </tr>
                    <tr class="text-center mb-0 text-lg font-weight-bold">
                      <th>grams</th>
                      <th>meters</th>
                      <th>feet</th>
                      </tr>
                  </thead>
                  <tbody>
                  {%  for flight in f.flight_data %}
                    <tr>
                      <td class="text-center mb-0 text-lg font-weight-bold">{{ flight.name }}</td>
                      <td class="text-center mb-0 text-lg font-weight-bold text-nowrap">{{ flight.mission_specialists }}</td>
                      <td class="text-center mb-0 text-lg font-weight-bold text-nowrap">{{ flight.flight_engineers }}</td>
                      <td class="text-center mb-0 text-lg font-weight-bold text-nowrap">{{ flight.rocket_type }}</td>
                      <td class="text-center mb-0 text-lg font-weight-bold text-nowrap">{{ flight.weight|format_zero|format_data:1|units:'g' }}</td>
                      <td class="text-center mb-0 text-lg font-weight-bold text-nowrap">{{ flight.altitude_m|format_zero|format_data:1|units:'m' }}</td>
                      <td class="text-center mb-0 text-lg font-weight-bold text-nowrap">{{ flight.altitude_f|format_zero|format_data:1|units:'ft' }}</td>
                      <td class="text-center mb-0 text-lg font-weight-bold text-nowrap">{{ flight.egg }}</td>
                      <td class="text-center mb-0 text-lg font-weight-bold text-nowrap">{{ flight.shockcord }}</td>
                      <td class="text-center mb-0 text-lg font-weight-bold text-nowrap">{{ flight.nose_cone }}</td>
                      <td class="text-center mb-0 text-lg font-weight-bold text-nowrap">{{ flight.coupler }}</td>
                      <td class="text-center mb-0 text-lg font-weight-bold text-nowrap">{{ flight.parachute }}</td>
                      <!--<td class="mb-4 text-lg font-weight-bold">{{ flight.notes|safe }}</td>-->
                      <td class="text-center mb-0 text-lg font-weight-bold text-nowrap"> 
                        <button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#{{ flight.flight_id }}">Read the flight notes</button>
                      </td>
                    </tr>
                  {% endfor %}    
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    {% endfor %}  

渲染的 html:

   <!-- Modal -->
<div class="modal fade" id="629" tabindex="-1" role="dialog" aria-labelledby="629Label" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="629Label">Notes for the flight of the Baseball Boys and Ellie</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        We used tissues and 4 cotton balls to cushion the egg. Our predicted altitude was 500 feet. The rocket took off and arced over toward the southeast. The parachute came out and the rocket was spinning a lot as it came down. The wind pushed the rocket over the fence and it landed on the sidewalk. <a href="https://hopirockets.com/gallery_rockets/index.php/Jan_9_2023/Voris/Baseball_Boys_and_Ellie" target="_blank">Pictures</a>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <!--<button type="button" class="btn btn-primary">Save changes</button>-->
      </div>
    </div>
  </div>
</div>  
<div class="row mt-4">
<div class="col-12">
  <div class="card mb-4">
    <div class="card-header pb-0">
      <p class="mb-1 pt-2 text-bold">01/09/2023</p>
      <h5 class="font-weight-bolder">Mrs. Voris</h5>
    </div>
    <div class="card-body px-0 pt-0 pb-2">
      <div class="table-responsive p-0">
        <table class="display" id="models" style="width:100%">
          <thead>
          <tr class="text-center mb-0 text-lg font-weight-bold">
              <th rowspan="2">Rocket Name</th>
              <th rowspan="2">Mission Specialists</th>
              <th rowspan="2">Flight Engineers</th>
              <th rowspan="2">Type</th>
              <th colspan="1">Lift-off Weight</th>
              <th colspan="2">Altitude</th>
              <th rowspan="2">Egg</th>
              <th rowspan="2">Shockcord</th>
              <th rowspan="2">Nose cone</th>
              <th rowspan="2">Coupler</th>
              <th rowspan="2">Parachute</th>
              <th rowspan="2">Notes</th>
          </tr>
            <tr class="text-center mb-0 text-lg font-weight-bold">
              <th>grams</th>
              <th>meters</th>
              <th>feet</th>
              </tr>
          </thead>
          <tbody>
          
            <tr>
              <td class="text-center mb-0 text-lg font-weight-bold">Baseball Boys and Ellie</td>
              <td class="text-center mb-0 text-lg font-weight-bold text-nowrap">Jackson</td>
              <td class="text-center mb-0 text-lg font-weight-bold text-nowrap">Sol, Ellie</td>
              <td class="text-center mb-0 text-lg font-weight-bold text-nowrap">Astra III</td>
              <td class="text-center mb-0 text-lg font-weight-bold text-nowrap">91.2 g</td>
              <td class="text-center mb-0 text-lg font-weight-bold text-nowrap">97.0 m</td>
              <td class="text-center mb-0 text-lg font-weight-bold text-nowrap">318.3 ft</td>
              <td class="text-center mb-0 text-lg font-weight-bold text-nowrap">intact</td>
              <td class="text-center mb-0 text-lg font-weight-bold text-nowrap">intact</td>
              <td class="text-center mb-0 text-lg font-weight-bold text-nowrap">intact</td>
              <td class="text-center mb-0 text-lg font-weight-bold text-nowrap">intact</td>
              <td class="text-center mb-0 text-lg font-weight-bold text-nowrap">opened</td>
              <!--<td class="mb-4 text-lg font-weight-bold">We used tissues and 4 cotton balls to cushion the egg. Our predicted altitude was 500 feet. The rocket took off and arced over toward the southeast. The parachute came out and the rocket was spinning a lot as it came down. The wind pushed the rocket over the fence and it landed on the sidewalk. <a href="https://hopirockets.com/gallery_rockets/index.php/Jan_9_2023/Voris/Baseball_Boys_and_Ellie" target="_blank">Pictures</a></td>-->
              <td class="text-center mb-0 text-lg font-weight-bold text-nowrap"> 
                <button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#629">Read the flight notes</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

我验证了 bootstrap.min.js 和 popper.min.js 已加载到页面上。

我尝试将模态 div 放入具有按钮的“td”中，但它在那里也不起作用。

模态 div 在页面上的什么位置？

页面这部分的图片。

Answer 1

经过一番挖掘，似乎在 bootstrap 5+ 中，一些名称被更改了......也许是为了保护无辜者？？

data-toggle -> data-bs-toggle
data-target -> data-bs-target
data-dismiss -> data-bs-dismiss

通过这些更改，我的代码可以工作了。除了当我尝试使用数字 ID 时出现错误。我在 id 前面添加了“modal”前缀，现在一切正常了。