html 点击img标签弹出层放大，再点击恢复

参考文档：https://blog.csdn.net/CherryLee_1210/article/details/80944703

点击前状态 点击后效果

html代码：

<div class="img-list-box">
    <div class="img-select">
        <img id="img" src="~/imgs/swmain.png" >
    </div>
</div>

<div class="dialog-bg" id="dialog-bg">
    <div class="img-box" id="img-box">
        <img src="">
    </div>
</div>

css:

<style>
    .img-select img {
        width: 500px;
        height: 300px;
    }

    .dialog-bg {
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,0.4);
    }
        .dialog-bg .img-box {
            width: 1165px;
            height: 650px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -582px;
            margin-top: -340px;
        }

            .dialog-bg .img-box img {
                width: 100%;
                height: 100%;
            }
</style>

js:

<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    //无论点击哪一个img弹出层都会展示相应的图片。
    $(".img-select").find("img").on("click", function () {
        $(this).each(function () {
            var $this = $(this);
            var $img = $this.attr("src");//获取当前点击img的src的值
            $("#img-box").find("img").attr("src", $img);//将获取的当前点击img的src赋值到弹出层的图片的src
            $("#dialog-bg").show();//弹出层显示
        });
    });

    //弹出层隐藏
    $("#dialog-bg").on("click", function () {
        $(this).hide();//
    });
</script>