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);" οnclick="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;
}