bootstrap+jquery 点击显示大图功能

这里用的是bootstrap的模态框

一、页面部分

①模态框部分：

<!-- 显示大图部分 --><div class="modal fade bs-example-modal-lg text-center" id="imgModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" ><div class="modal-dialog modal-lg" ><!-- style="display: inline-block; width: auto;" --><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button><h4 class="modal-title" id="modalLabel"></h4></div><img alt="暂无图片" id="imgInModalID" src="" width="90%" ></div></div></div>

【注意点一】图片只设置宽度，这样就能等比例的放大了

②点击查看大图部分

<span><a href="javascript:void(0);" onclick="showBigImg('${pro.pictrue}','${pro.proName }')" >查看大图</a></span>

我这里是遍历取出值的，所以要输入图片地址和图片名称到函数里

二、jquery

// 查看大图function showBigImg( pictrue, name){$("#modalLabel").text(name);$("#imgInModalID").attr("src", getContextPath()+"/images/"+pictrue);$("#imgModal").modal('show');//alert(pictrue +" "+name);}//jquery获得path路径function getContextPath() {var pathName = document.location.pathname;var index = pathName.substr(1).indexOf("/");var result = pathName.substr(0,index+1);return result;}