multi Bootstrap modal in einer Seite Problem

Question

Ich habe mehrere Karte in einer Seite, ich gerendert alle von ihnen mit einer Schleife, ich möchte, wenn Benutzer auf jeder, verwandte modale Show für Benutzer, ich setze das mit folgenden Ausschnitt

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

, wenn ich auf Karten klicken Show Modal immer richtig, aber wenn Klick schließen modale verschwinden aber Hintergrund dunkel, wenn ich überprüfen meine Markup ich sah

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

hinzugefügt von body.where zu beenden, ist das Problem? Ist meine Lösung korrekt, Multi-Bootstrap-Modal auf einer Seite zu implementieren? Wenn nicht, was ist die wahre Lösung? es scheint, wenn ich in der Nähe klicken Sie auf einige <div class="modal-backdrop fade in"></div> meiner Markup hinzufügen

Answer 1

ich die Lösung für dieses Problem gefunden, das Problem auftreten, da Modal Markup innerhalb des Elements war Ursache modal auf Klick ausgelöst, ich meine, das ist das Problem

<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 Lösung **

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

ich meine platziere Modal Inhalt nicht innerhalb des Elements Ursache mod al ausgelöst