Question

我在我的html代码上有一个for循环来显示数据列表，当我在此循环中创建Bootstrap Modal以显示列表的每个元素时。似乎模态仅适用于列表的第一个元素。

    {% for i in lb %}
    <button  class="btn" id="myBtn" title="Ajouter Serveur" style="padding-bottom:1px" data-target="#myModal"><a class="icon-plus-sign" title="Ajouter Serveur"></a></button>
    <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">

                            <h4 class="modal-title">Ajouter Serveur</h4>
                        </div>
    <div class="modal-body">
                            <form method="post" class="loginForm">
                            <input type="hidden" name="lb" value="{{ i.Nom }}">
                            <h6>{% csrf_token %}
                                {{ form.as_table }}</h6>

                        <input type="submit" name="submit" class="btn btn-primary " value="Submit" />
                            </form>
                        </div>
                        <div class="modal-footer">

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

                        </div></div>

     {% endfor %}

Answer 1

id和button的{{1}}值必须在文档中唯一。尝试为id添加唯一值，即：

<div class="modal">

Answer 2

在 HTML id 中具有唯一标识。所以我们在每个模态中使用唯一的 id

{% for l in lamp %}
<h6>change in button</h6>

<button data-target="#mymodal{{l.id}}"</button>

<h6>change in modal id </h6>

<div class="modal" id="mymodal{{l.id}}"</div>
 {% endfor %}

循环django中的多模态引导程序

2 个答案: