jquery 遮罩层显示img

Posted 2020-09-26 lcawen

如果点击iframe中的image显示整个页面的遮罩层，可参考如下：

http://blog.csdn.net/shiaijuan1/article/details/70160714

具体思路就是，顶层添加dom对象，用来显示信息，默认隐藏，需要时在iframe中调用，宽高设置为100%。

实现如下：

   //遮罩层
    .showmask {
            position: fixed;
            z-index: 99;
            width: 100%;
            height: 100%;
            background-color: silver;
            top: 0px;
            left: 0px;
            opacity: 0.5;
        }
     
        .showmasklayer {
            position: absolute;
            z-index: 168;
            top: 0px;
            left: 0px;
            min-width: 100%;
            min-height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
       //关闭按钮
        .showmaskclose {
            background-color: red;
            color: white;
            border: 2px solid gray;
            position: fixed;
            z-index: 288;
            top: 0px;
            right: 0px;
            cursor: pointer;
            height: 30px;
            width: 30px;
            font-size: large;
            font-weight: bold;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
        }

iframe中调用如下：

 $(function () {
        $("#image").on("click", function () {
            //判断是否已经添加过遮罩层dom
            if ($(".showmaskclose", window.top.document).length == 0) {
                //附加遮罩层dom
                $("body", window.top.document).append("<div class=‘showmaskclose‘>×</div>").append("<div class=‘showmask‘></div>").append("<div class=‘showmasklayer‘></div>")
                //附加后绑定事件
                $(".showmaskclose", window.top.document).on("click", function () { htsHide(); })
                $(".showmask", window.top.document).on("dblclick", function () { htsHide(); })
                $(".showmasklayer", window.top.document).on("dblclick", function () { htsHide(); })
                //添加图片
                $(".showmasklayer", window.top.document).append("<img src=‘" + this.src + "‘ />")
            }
            else {
                //遮罩层dom显示
                $(".showmaskclose", window.top.document).show();
                $(".showmask", window.top.document).show();
                $(".showmasklayer", window.top.document).show();
                //切换图片
                $(".showmasklayer > img", window.top.document).attr(‘src‘, this.src);
            }
        });
    });
    function htsHide() {
        //遮罩层隐藏
        $(".showmask", window.top.document).hide();
        $(".showmaskclose", window.top.document).hide();
        $(".showmasklayer", window.top.document).hide();
    }