2017-02-10 33 views
0

我正在從事symfony項目和我的樹枝視圖即時獲取數據庫中的圖像列表,我想讓他們可點擊s當我點擊任何圖像模態彈出顯示我的形象引導模式不顯示我的可點擊圖像?

這是我的看法與模態

<div class="container-fluid" style="padding-top: 70px;display: block;"> 
          {% for i in img2|slice(0,4) %} 
           <div id="membre_panel" style="display:inline-flex;"> 
            <div id="img_style_grp" style="margin-right: 5px;"> 
             <a href="#" class="pop"> 
             <img src="{{ i.lien }}" id="1" data-toggle="modal" data-target="#myModal" style="width: 90px;height: 70px;"> 
             </a> 

             <!-- Creates the bootstrap modal where the image will appear --> 
             <div id="myModal" class="modal fade" role="dialog"> 
              <div class="modal-dialog"> 
               <div class="modal-content"> 
                <div class="modal-body"> 
                 <img id="imgsrc"class="showimage img-responsive" src="" /> 
                </div> 
                <div class="modal-footer"> 
                 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
                </div> 
               </div> 
              </div> 
             </div> 
            </div> 
          </div> 
           {% endfor %} 
         </div> 

這是我的腳本

<script> 
    $(document).ready(function() { 
     $('img').on('click', function() { 
      var image = $(this).attr('src'); 
      alert(image); 
      $('#myModal').on('show.bs.modal', function() { 
       $("#imgsrc").attr("src", image); 
      }); 
     }); 
    }); 
</script> 

這是當我像 空彈出上點擊我得到什麼 output

+0

你肯定show.bs.切換它模態被稱爲?嘗試它沒有 – Mazz

+0

你的HTML圖像的'src'是空的'src =「」',所以當你使用'var image = $(this).attr('src');'這也是空白的。在我看來,這可能是你的問題。開始的時候'src'是空的。 –

+0

不,它在我看到一個警告後,點擊圖像,這個警報是包含圖像url –

回答

0

我發現,這個問題從。對函數來了,當我表演的照片出現,但它不適合模態的div

<script> 
          $(document).ready(function() { 
           $('img').on('click', function() { 
            var image = $(this).attr('src'); 
            $('#myModal').show('show.bs.modal', function() { 
             $(".showimage").attr('src',image); 
            }); 
           }); 
          }); 
         </script> 

modal output