如果点击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%;'/>") } }