multi bootstrap modal in one page issue

Question

I have several card in a page, I rendered all of them with a loop, I want when user clicked on each one , related modal show to user, I implement that with following snippet

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

when I click on cards modal getting show correctly but when click close modal disappear but background getting dark, when I inspect my markup I saw

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

added to end of body.where is the problem? is my solution is correct to implement multi bootstrap modal on a page? if not what is the true solution? it seems when I click on close some <div class="modal-backdrop fade in"></div> add to my markup

Possible duplicate of [Twitter bootstrap modal-backdrop doesn't disappear](http://stackoverflow.com/questions/11519660/twitter-bootstrap-modal-backdrop-doesnt-disappear) — Luuk Skeur, Sep 29 '16 at 10:10
@LuukSkeur not , it is not duplicated of that, there is a issue here , please before down vote read the question carefully. — Yuseferi, Sep 29 '16 at 10:37
@LuukSkeur I found my solution , take a look at the answer and tell me you think still it's duplicate of that question? — Yuseferi, Sep 29 '16 at 10:45

score 0 · Accepted Answer · answered Sep 29 '16 at 10:44

I found the solution for this issue, the problem occur because Modal markup was inside the element cause modal triggered on click, I mean the the problem is

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

**So solution is **

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

I mean Don't Put Modal Content inside the element cause modal triggered

multi bootstrap modal in one page issue

1 Answers1