引导模式在单击按钮时不显示内容（Django 框架）

Question

我在 HTML 代码中遇到了 Bootstrap 模式的问题，当我单击触发它们的按钮时，它们没有显示任何内容。尽管 ID 和属性看似正确，但单击按钮后模式仍为空。

这是我的 HTML 代码的相关部分：

<tbody>
                                            {%for coder in coders %}
                                            <tr>
                                                <td>{{coder.coder_number}}</td>
                                                <td>{{coder.first_name}}</td>
                                                <td>{{coder.last_name}}</td>
                                                <td>{{coder.lc_id}}</td>
                                                <td>{{coder.rating}}</td>
                                                <td>
                                                  <button type="button" class="btn btn-success me-1" href="{% url 'view_coder' coder.id %}" data-bs-toggle="modal" data-bs-target="#myModal{{coder.id}}">
                                                    <i class="fa-solid fa-circle-info"></i>
                                                  </button>
                                                  <!-- modal -->
                                                  <div class="modal" id="#myModal{{coder.id}}" tabindex="-1" aria-labelledby="myModalLabel1" aria-hidden="true">
                                                    <div class="modal-dialog" role="document">
                                                      <div class="modal-content">
                                                        <div class="modal-header">
                                                          <h5 class="modal-title">
                                                            coder: {{coder.first_name}} {{coder.last_name}}
                                                          </h5>
                                                          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                                                            <span aria-hidden="true"></span>
                                                          </button>
                                                        </div>
                                                        <div class="modal-body">
                                                          <ul class="list-unstyled">
                                                            <li>S.No. <strong>{{coder.coder_number}}</strong></li>
                                                            <li>Name: <strong>{{coder.first_name}} {{coder.last_name}}</strong></li>
                                                            <li>Leetcode Id: <strong>{{coder.lc_id}}</strong></li>
                                                            <li>Rating <strong>{{coder.rating}}</strong></li>
                                                            <!-- <li>S.No. <strong>{{coder.coder_number}}</strong></li> -->
                                                          </ul>
                                                        </div>
                                                        <div class="modal-footer">
                                                          <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
                                                        </div>
                                                      </div>
                                                    </div>
                                                  </div>
                                                </td>
                                            </tr>
                                            {% endfor %}
                                        </tbody>

`

[]()

我希望这种类型的结果从 6 小时起就一直存在

Answer 1

您的模态中的 id 属性似乎可能存在问题。在模态定义中，您有 id="#myModal{{coder.id}}"。 id 属性内不需要# 符号；它应该只是 id="myModal{{coder.id}}"。

按如下方式更新模态定义：

<!-- modal -->
<div class="modal" id="myModal{{coder.id}}" tabindex="-1" aria-labelledby="myModalLabel1" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">
          coder: {{coder.first_name}} {{coder.last_name}}
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
          <span aria-hidden="true"></span>
        </button>
      </div>
      <div class="modal-body">
        <ul class="list-unstyled">
          <li>S.No. <strong>{{coder.coder_number}}</strong></li>
          <li>Name: <strong>{{coder.first_name}} {{coder.last_name}}</strong></li>
          <li>Leetcode Id: <strong>{{coder.lc_id}}</strong></li>
          <li>Rating <strong>{{coder.rating}}</strong></li>
        </ul>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

确保从 id="myModal{{coder.id}}" 中删除 # 符号。这应该可以解决单击按钮时 Bootstrap 模式不显示内容的问题。 希望这对您有帮助！