使用bPopup实现图片模态框的放大展示

现在前端需求越来越各种花哨了，图片展示插件也很多。

看了下gellary觉得挺难得，还是从简单做起，用bpopupJs实现吧。

先看一下实现的效果吧。

点击任意一张图片，就能跳出图片的大图啦

1.首先页面中引入jQuery.js和jquery.bpopup.min.js是必须的啦。

2.在body里面添加一个你要显示的模态框，我这里就比较简单啦，就只是展示图片而已。

3.在点击的小图上加上onclick事件，自己是<div class="imgDiv" imgInfo = "images/gallery/01-l.jpg">   在div里面自己定义了而一个属性imgInfo来保存显示大图的路径。

当然大家有多少图片就放多少个div。

4.在css中设置下模态框的样式即可。

我只是在bPopup的css中设置了下边框颜色简单的样式，大家有特殊需求可以自己再设置样式

5.最后一步，也是最重要的一步，就是显示图片。

$('.imgDiv').bind('click', function(e) {                                 //给需要大图显示的div设置click事件
        var imgInfo = this.getAttribute("imgInfo");                 //得到div的imgInfo内容，也就是需要显示的大图的src
        var img = $("#bPopup img").attr("src",imgInfo);        //将bPopup模态框中的img的src设置为得到的大图路径
        var bPopup = $('#bPopup');                                 
        bPopup.append(img);                                               //将img放入到bPopup模态框中
$(img).on('load',function(){                               //这里注意一定要用onload事件，因为bPopup它自动将图片放在浏览器的最  中间的，但是当图片还未加载完成时，bPopup无法得知图片的大小，就自                                                                                           动在页面的正中间定位，但当图片加载完成时，在整个页面中确实不居中  的。所以一定要当img加载完成时，再跳出bPopup模态框。
                 $('#bPopup').bPopup();
});
     });

  就这样，就可以实现图片的模态框显示啦，简单吧。

 源码附上