jquery 遮罩层显示img

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

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

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

实现如下：

   //遮罩层
    .showmask {
            position: fixed;//position设置为fixed或者absolute或者relative，z-index才生效，且z-index值越大越显示到顶层
            z-index: 99;//fixed固定定位，相对于浏览器窗口
            width: 100%;//relative相对定位，相对于其正常位置进行定位，比如left:20px，相对于其正常位置向左偏移20个像素
            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;
        }

这儿调整一下，为了解决，部分图片像素过大，浏览器无法展示全部，又没有加入拖动及滚动条等：

       .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- 100%; 这里默认显示100%，不能超过100%
            min-height: 100%;*/
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

            .showmasklayer img {
                max-width: 100%;/*图片最大宽高都是100%*/
                max-height: 100%;
            }

        .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>")
　　　　　　　　　 //这儿双击遮罩showmask/showmasklayer时候，会导致showmasklayer图片成选中状态，这儿可以调整为如下,参照：www.w3cui.com?p=141：
　　　　　　　　　 //.append("<div class='showmasklayer' unselectable='on' style='-moz-user-select:none;' onselectstart='return false;'></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();//可通过css设置display为none和block控制显示和隐藏
                $(".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();
    }

 以上的js在双击showmask关闭时，重新打开，时而会出现一个类似于showmask选中状态的东西，体验不好，可以每次关闭后移除，下次点击时添加，如下：

$(function () {
        $("#image").on("click", function () {
            //添加遮罩层
            $("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 + "' />")
        });
    });
    function htsHide() {
        //移除遮罩层
        $(".showmaskclose", window.top.document).remove();
        $(".showmask", window.top.document).remove();
        $(".showmasklayer", window.top.document).remove();
    }

呵呵，升级一下，加入图像的旋转功能，主要是通过css样式调整实现：

css：

.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;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

            .showmasklayer img {
                max-width: 100%;
                max-height: 100%;
            }

        .showmaskrotate {/*实现旋转的按钮*/
            background-color: Highlight;
            color: white;
            border: 2px solid gray;
            position: fixed;
            z-index: 288;
            top: 0px;
            right: 40px;
            cursor: pointer;
            height: 30px;
            width: 30px;
            font-size: large;
            font-weight: bold;
            text-align: center;
            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;
        }

js,rotate实现:

/**
 * jquery-rotate v0.1.0
 *  Very lightweight jquery rotate plugin using CSS 3 Transformation
 *  https://github.com/schickling/jquery-rotate
 */
(function ($) {

    $.fn.extend({
        rotate: function (deg) {

            // cache dom element
            var $this = $(this);

            // make deg random if not set
            if (deg === null) {
                deg = Math.floor(Math.random() * 359);
            }

            // rotate dom element
            $this.css({
                '-webkit-transform': 'rotate(' + deg + 'deg)',
                '-moz-transform': 'rotate(' + deg + 'deg)',
                '-ms-transform': 'rotate(' + deg + 'deg)',
                '-o-transform': 'rotate(' + deg + 'deg)',
                'transform': 'rotate(' + deg + 'deg)'
            });

            // make chainable
            return $this;
        }
    });

})(jQuery);

js，调用img遮罩：

    function htsHide() {
        $(".showmaskclose", window.top.document).remove();
        $(".showmaskrotate", window.top.document).remove();
        $(".showmask", window.top.document).remove();
        $(".showmasklayer", window.top.document).remove();
    }
    oper = {
        View: function (imagepath) {
            $("body", window.top.document).append("<div class='showmaskclose'>×</div><div class='showmaskrotate'>⌒</div>").append("<div class='showmask'></div>").append("<div class='showmasklayer'></div>")
            var tIndex = 0;//控制旋转次数
            $(".showmaskclose", window.top.document).on("click", function () { htsHide(); })
            $(".showmaskrotate", window.top.document).on("click", function () { $('.showmasklayer > img', window.top.document).rotate(-90 * ++tIndex); })//实现旋转功能，每次逆时针旋转90度
            $(".showmask", window.top.document).on("dblclick", function () { htsHide(); })
            $(".showmasklayer", window.top.document).on("dblclick", function () { htsHide(); })
            $(".showmasklayer", window.top.document).append("<img src='" + imagepath + "' style='max-height:100%;max-100%;'/>")
        }
    }