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>

添加到body的末尾。问题出在哪里？我的解决方案是否正确在页面上实现多引导模式？如果不是什么是真正的解决方案？ 似乎当我点击关闭一些<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>

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

一页问题中的多引导模式

1 个答案: