点击图片实现放大图片
詹夕
思路为：img上面添加onclick,并将当前src当做参数传递，然后在方法中打开模态框
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bootstrap 实例 - 模态框（Modal）插件</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-md-12 ">
<label>图片:</label>
<div>
<img src="http://7xrpyy.com1.z0.glb.clouddn.com/%E4%BC%81%E4%B8%9A%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_15336108233731.png" onclick="imgZoomIn(this.src);" width="50" height="50" />
</div>
<!--图片放大 模态框（Modal） -->
<div class="modal fade text-center" id="imgZoomInModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" style="display: inline-block; width: auto;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button>
</div>
<div class="modal-body">
<img src="" id="pigImg" />
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
</div>
</div>
</body>
<script type="text/javascript">
//点击查看原图
function imgZoomIn(src){
$("#pigImg").attr('src',src);
$("#imgZoomInModal").modal("show");
}
</script>
</html>关键三点：
- 用
display: inline-block； - 父节点用
text-center样式居中； - 重置宽度
width: auto
类似资料：