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-width: 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-width:100%;'/>")
        }
    }