javascript - 一页问题中的多 Bootstrap 模式

Question

我在一个页面中有几张卡片，我用一个循环渲染了所有卡片，我希望当用户单击每一张卡片时，向用户显示相关的模式，我用以下代码片段实现它

                {%  for i,item in node.field_what_you_will_build %}
            <div class="prj-box "   data-dismiss="modal"  data-toggle="modal"   data-target="#projectcard-{{ i }}">
            <div id="projectcard-{{ i }}" class="modal fade" role="dialog">
                        <div class="modal-dialog">
                            <!-- Modal content-->
                            <div class="modal-content">
                                <div class="modal-header nopadding">
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                                    <div class="login-head">
                                        <img src="/{{ directory }}/images/logo-b.png" />
                                    </div>
                                </div>
                                <div class="modal-body">


                                </div>

                            </div>

                        </div>
                    </div>

                    <div class="lbl"> {{ 'Project'|t }}</div>
                    <div class="title">{{ item.first }}</div>
                    <div class="desc">{{ item.second }}

                    </div>
                    <div class="badge">{{ i+1}}</div>
                        <div class="shadow-wrapper">
                        </div>
                    </div>
                {% endfor %}

当我单击卡片模式时正确显示，但当单击关闭模式消失但背景变暗时，当我检查我的标记时，我看到

  <div class="modal-backdrop fade in"></div>
  <div class="modal-backdrop fade in"></div>
  <div class="modal-backdrop fade in"></div>

添加到正文末尾。问题出在哪里？我的解决方案是否正确地在页面上实现多 Bootstrap 模式？如果不是，真正的解决方案是什么？ 似乎当我点击关闭一些<div class="modal-backdrop fade in"></div>时添加到我的标记

Answer 1

我找到了这个问题的解决方案，出现问题是因为模态标记位于元素内部，导致点击时触发模态，我的意思是问题是

<div class="prj-box "   data-dismiss="modal"  data-toggle="modal"   data-target="#projectcard-{{ i }}">
  <div id="projectcard-{{ i }}" class="modal fade" role="dialog">
                    <div class="modal-dialog">
                        <!-- Modal content-->
                        <div class="modal-content">
                            <div class="modal-header nopadding">
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                <div class="login-head">
                                    <img src="/{{ directory }}/images/logo-b.png" />
                                </div>
                            </div>
                            <div class="modal-body">
                            </div>
                        </div>
                    </div>
                  </div>
                </div>

**所以解决方案是**

 <div class="prj-box "   data-dismiss="modal"  data-toggle="modal"   data-target="#projectcard-{{ i }}">
  </div>
  <div id="projectcard-{{ i }}" class="modal fade" role="dialog">
                    <div class="modal-dialog">
                        <!-- Modal content-->
                        <div class="modal-content">
                            <div class="modal-header nopadding">
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                <div class="login-head">
                                    <img src="/{{ directory }}/images/logo-b.png" />
                                </div>
                            </div>
                            <div class="modal-body">
                      </div>
                  </div>
          </div>
      </div>

我的意思是不要将模态内容放入元素内，导致模态触发