javascript - 一页中的多引导模式

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

                {%  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>

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

最佳答案

我找到了解决此问题的方法，出现此问题的原因是，模态标记位于元素内部，导致单击时触发了模态，这意味着问题是

<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>

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