Bootstrap Modal nicht in Fotoraster öffnen

Question

Ich habe ein Foto shuffle Raster, mit diesem Raster kann ich ein paar Themen auswählen und es zeigt nur die Bilder des Themas.

Jetzt möchte ich Folgendes tun, wenn ich auf ein Bild klicke ich möchte ein Modal zu öffnen. Das Problem, das ich habe, ist die folgende:

• Das erste Bild (mit einem modalen in den Rücken) öffnet, ohne Probleme, aber die anderen Bilder (mit Modalverben) nicht wahrscheinlich öffnen, ich sehe sie (die Hälfte), aber ich kann nicht auf sie klicken.

Dies ist mein Code:

HTML

<ul class="portfolio-sorting list-inline text-center"> 
    <li><a href="#" data-group="all" class="active">All</a></li> 
    <li><a href="#" data-group="heren">Heren</a></li> 
    <li><a href="#" data-group="dames">Dames</a></li> 
    <li><a href="#" data-group="jongens">jongens</a></li> 
    <li><a href="#" data-group="meisjes">meisjes</a></li> 
    <li><a href="#" data-group="gemengd">gemengd</a></li> 
</ul> 
<!--end portfolio sorting --> 

<ul class="portfolio-items list-unstyled" id="grid"> 
    <li class="col-md-4 col-sm-4 col-xs-6" data-groups='["heren"]'> 
     <figure class="portfolio-item"> 
      <button type="button" class="btn button_test" value="Heren1" data-toggle="modal" data-target="#heren1">     <img src="img/test.jpg" alt="Item 1" class="img-responsive"> 
       <h2 class="teams">heren 1</h2> 
      </button> 
      <div class="modal fade bs-example-modal-lg" id="heren1" role="dialog" style="display: none;"> 
       <div class="modal-dialog modal-lg"> 
        <!-- Modal content--> 
        <div class="modal-content"> 
         <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal">×</button> 
          <h4 class="modal-title black_tekst">Heren 1</h4> 
         </div> 
         <div class="modal-body"> 
          <!--Tekst --> 
          <h2 class="black_tekst">Test </h2> 
          <p class="black_tekst"> 
           <br> 
           <br> Team informatie 
           <br> 
           <br> 
          </p> 
          <h3 class="black_tekst">Test</h3> 
          <!--Einde tekst --> 
         </div> 
         <div class="modal-footer"> 
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
         </div> 
        </div> 
       </div> 
      </div> 
     </figure> 
    </li> 
    <!---------------------------------------------------------------------------> 
    <li class="col-md-4 col-sm-4 col-xs-6" data-groups='["heren"]'> 
     <figure class="portfolio-item"> 
      <button type="button" class="btn button_test" value="Heren2" data-toggle="modal" data-target="#heren2">     <img src="img/test.jpg" alt="Item 1" class="img-responsive"> 

       <h2 class="teams">heren 2</h2> 
      </button> 
      <div class="modal fade" id="heren2" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
       <div class="modal-dialog" role="document"> 
        <div class="modal-content"> 
         <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
           <span aria-hidden="true">&times;</span> 
          </button> 
          <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
         </div> 
         <div class="modal-body"> 
          ... 
         </div> 
         <div class="modal-footer"> 
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
          <button type="button" class="btn btn-primary">Save changes</button> 
         </div> 
        </div> 
       </div> 
      </div> 
     </figure> 
    </li> 
    <!---------------------------------------------------------------------------------> 
    <!-- sizer --> 
    <li class="col-md-4 col-sm-4 col-xs-6 shuffle_sizer"></li> 
</ul> 
<!--end portfolio grid --> 

CSS und JS Sie auf https://jsfiddle.net/hrpj3j9t/2/

Answer 1

1) Bad Code versehen auf jsfiddle finden - unklar, modernizr in js Codeabschnitt

2) Aus meiner Sicht ist der beste Weg, Code zu generieren, den Sie mit jquery benötigen. In imageSrc meine ich den wahren Weg zum Bild. das kleine Beispiel Konzept Dieses:

Platz modal an der Spitze:

<body> 
    <div class="modal" id="modal"> 
     <img id="modalImage" src = "" alt="image"> 
     ... 
    </div> 
    ... 
    <div class="elementOfGrid" data-image="imageSrc"> 
</body> 

in js:

$('elementOfGrid').click(function(){ 
      $('#modal #modalImage').attr({"src":$(this).data("image")}); 
      $('#modal').modal("show"); 
    } 

eine andere Variante statt Einstellung Attribut Sie können das gesamte HTML erzeugen und verwenden wie folgt:

$('#modal').html(''); 
    var htmlRow = '<div class="modalImage"><img src="imageSrc"></div>'; 
    $('#modal').html(htmlRow);