JQuery+Bootstrap利用模态框Modal实现图片弹窗并放大图片(单击任意区域图片还原)

上一篇博客写了有关图片弹窗的比较原始的代码
有许多地方不太方便,不太好看
百度了一下,度娘说模态框能够帮助我实现这个功能
于是就试了一下,将固定弹窗改成图片

主要思路:

  1. 点击图片,调用js方法BigBig(src, width, height),传入图片相对位置、长度、宽度等信息;
  2. 设置模态框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>
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页