2017-02-10 48 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