上一篇博客写了有关图片弹窗的比较原始的代码
有许多地方不太方便,不太好看
百度了一下,度娘说模态框能够帮助我实现这个功能
于是就试了一下,将固定弹窗改成图片
主要思路:
- 点击图片,调用js方法BigBig(src, width, height),传入图片相对位置、长度、宽度等信息;
- 设置模态框id='myModal’属性,并将放大后的位置信息、尺寸信息、图片位置信息写入弹出框中;
上代码(只需修改图片链接就可以实现上述功能):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery+Bootstrap实现图片弹窗并放大图片</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<style type="text/css">
ul li{
list-style: none;
}
#container{
overflow: hidden;
}
#container img{
transition: all 1s;
}
#container img:hover{
transform: scale(1.03);
}
</style>
<script type="text/javascript">
function BigBig(src, width, height) {
$('#myModal').on('show.bs.modal', function () {
var modal = $(this);
modal.find('.modal-dialog').css({'margin-left':(document.body.clientWidth - width*1.5)/2 + 'px'})
modal.find('.modal-body #image').attr("src", src)
.attr("width", width*1.5)
.attr("height", height*1.5);
});
}
</script>
</head>
<body>
<!-- 模态框(Modal) -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-body" align="center">
<img src="" id="image">
</div>
</div>
</div>
<div id="container" class="logoImg amplifyImg">
<div id="firstTitle">
<div id="FirstImgField1" style="margin-top: 20px;">
<img onclick="BigBig(this.src, this.width, this.height);" data-target="#myModal" data-toggle="modal" style="width: 30%;" src='1001181.jpg'>
</div>
</div>
</div>
</body>
</html>