如何在单个页面中动态创建多个模态

Question

我正在做一个Django Blog Project，它从数据库中获取所有Blog，并仅在User Profile中显示Blog Title。我想为配置文件中显示的每个Blog创建Bootstrap Modal。每当用户单击标题时，模态就会显示详细信息。

{% for blog in blogs.all %}
  <div class="card mb-4 shadow-sm ">
      <p class="card-text "><h2>{{ blog.title }}</h2></p>
      <div class="card-body">
        <div class="btn-group">

          <!-- Open a Modal for the blog -->
          <!-- Button To Implement the Modal-->
          <button id = "modalToggle" type="button" class="btn btn-sm btn-outline-secondary" data-toggle="modal" data-target="#modal">View More</button>

          <!-- Modal -->
          <div class="modal fade" id="modal" role="dialog">
            <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                <h4 class="modal-title">{{ blog.title }}</h4>
                </div>
                <div class="modal-body">
                <p>{{ blog.body }}</p>
                </div>
                <div class="modal-footer">

                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                </div>
              </div>
            </div>
          </div>
       </div>
     </div>
  </div>

这里所有Blog都显示第一个模式。我无法创建[[每个Blog的多种模式。

Answer 1

html元素的id属性应该是唯一的，并且仅出现在html文档中的一个元素上。您遇到的问题很可能是因为您正在为每个博客使用id="modal"创建一个元素。您可以使用以下方法解决此问题：

<button id = "modalToggle" type="button" class="btn btn-sm btn-outline-secondary"
        data-toggle="modal" data-target="#modal-blog-{{blog.pk}}">View More</button>

      <!-- Modal -->
      <div class="modal fade" id="modal-blog-{{blog.pk}}" role="dialog">

通过包含博客pk使用唯一的ID作为字符串，按钮应触发各自的博客。