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

如果您处于循环中，则必须使用不同的模态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>

Answer 2

我想我明白了。不要将id保留为数字，而是在前面添加一些随机文本。例如; id =“＃modal {{id}}”。我也遇到了这个问题，并解决了这个问题。我只是通过控制台进行检查，并记录了id ='{{id}}'的元素，它在控制台上显示错误，但是当我添加id ='modal {{id}}'之类的文本时，它可以正常工作。

Answer 3

如果任何人仍在寻找解决方案，请尝试以下代码（注意：我已经在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;

循环中的动态引导模式

3 个答案: