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

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

主要思路：

点击图片，调用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>

PengEddie

发布了27 篇原创文章 · 获赞 3 · 访问量 2117

私信关注

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

猜你喜欢