Bootstrap Modal不在照片網格中打開

我有一張照片洗牌網格，使用此網格我可以選擇幾個主題，它只顯示該主題的圖片。Bootstrap Modal不在照片網格中打開

現在我想要做到以下幾點，當我點擊一個圖像，我想打開一個模式。我的問題是：

第一個圖像（在後面的一個模式）沒有問題打開，但其他照片（與情態動詞）並不可能打開，我看到他們（半），但我不能點擊它們。

這是我的代碼：

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和JS你可以找到https://jsfiddle.net/hrpj3j9t/2/

來源

2016-09-10 The_guy_whos_learning

1）提供的jsfiddle壞碼 - 不清，Modernizr的在js代碼段

2）從我的角度來看，最好的方法是用jquery生成你需要的代碼。在imageSrc中，我的意思是圖像的真實路徑。這個概念的小例子：

將模在頂部：

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

在JS

：

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

另一種變體，而不是設置屬性可以生成整個HTML並使用它像這樣：

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

來源

2016-09-10 18:49:20 Nikita

Bootstrap Modal不在照片網格中打開

回答

相關問題