循环内的动态引导模式

Question

我在 jinja2 循环中创建跨度，当用户点击它们时，应该会出现一个带有动态内容的模式。更具体地说，动态项是每个模式内的地图图像：

<img src="http://maps.googleapis.com/maps/api/staticmap?markers=color:red%7Clabel:S%7C{{item.venue.latitude}},{{item.venue.longitude}}&zoom=17&size=400x400&sensor=false"/>

为了避免一个静态模态在循环中重复，我在模态对话框中添加了一个动态id：

<div class="modal-dialog" id="{{id}}" >

但这似乎行不通。这是我的代码：

<span style="cursor: pointer;" type="button" class="badge badge-white" data-toggle="modal" data-target="#myModal">Map</span>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" id="{{id}}" >
    <div class="modal-content" >
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Lorem ipsum<small>Lorem ipsum</small></h4>
      </div>
      <div class="modal-body text-center pagination-centered">
        <img src="http://maps.googleapis.com/maps/api/staticmap?markers=color:red%7Clabel:S%7C{{item.venue.latitude}},{{item.venue.longitude}}&zoom=17&size=400x400&sensor=false"/>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <!--<button type="button" class="btn btn-primary">Save changes</button>-->
      </div>
    </div>
  </div>
</div>

Answer 1

如果有人仍在寻找解决方案，请尝试以下代码（注意：我已经在 PHP 中完成了它，因为您可以在代码中看到 php 块。）这肯定会起作用

<?php
  $id=0;//define on the top of your function
    
   foreach()                     
<button type="button" class="btn-link" data-toggle="modal" data-target="#myModal<?php echo $id;?>">Read More</button></div>
                       
                       <div id="myModal<?php echo $id;?>" class="modal fade" role="dialog">
                            <div class="modal-dialog"> <!-- Modal content-->
                                    <div class="modal-content">
                                   //Popup content
                                     </div>

                            </div>
                      </div>

$id=$id+;//increase id value by for next iteration?>
endforech;

Answer 2

我想我想通了。不要将 id 保留为数字，而是在前面添加一些随机文本。例如; id="#modal{{ id }}"。 我也陷入了这个问题，这解决了它。我刚刚通过控制台使用 id='{{ id }}' 记录元素进行了检查，它在控制台上显示错误，但是当我添加一些像 id='modal{{ id }}' 这样的文本时，它工作得很好。

Answer 3

如果你在循环中，你必须使用不同的模态ID，试试：

    <span style="cursor: pointer;" type="button" class="badge badge-white" data-toggle="modal" data-target="#myModal{{id}}">Map</span>
<!-- Modal -->
<div class="modal fade" id="myModal{{id}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" id="{{id}}" >
    <div class="modal-content" >
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Lorem ipsum<small>Lorem ipsum</small></h4>
      </div>
      <div class="modal-body text-center pagination-centered">
        <img src="http://maps.googleapis.com/maps/api/staticmap?markers=color:red%7Clabel:S%7C{{item.venue.latitude}},{{item.venue.longitude}}&zoom=17&size=400x400&sensor=false"/>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <!--<button type="button" class="btn btn-primary">Save changes</button>-->
      </div>
    </div>
  </div>
</div>