如何使用Bootstrap或Angularjs显示大图像?

时间:2017-01-11 18:26:27

标签: angularjs twitter-bootstrap angular-ui-bootstrap bootstrap-modal

我正在使用bootstrap和angularjs,我想要显示大图像。我点击了图片,但它不起作用。这是怎么回事?当我显示大图像时,任何内置的引导程序库。

<html>
<head>

  <script type="text/javascript">
$(function() {
        $('.pop').on('click', function() {
            $('.imagepreview').attr('src', $(this).find('img').attr('src'));
            $('#imagemodal').modal('show');   
        });     
});
 </script>
 </head>
<body>
<a href="#" class="pop">
    <img src="http://patyshibuya.com.br/wp-content/uploads/2014/04/04.jpg" style="width: 400px; height: 264px;">
</a>

<a href="#" class="pop">
    <img src="http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg" style="width: 400px; height: 264px;">
</a>

<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">              
      <div class="modal-body">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <img src="" class="imagepreview" style="width: 100%;" >
      </div>
    </div>
  </div>
</div>
</body>
</html>

0 个答案:

没有答案