如果点击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:;//fixed固定定位,相对于浏览器窗口
width: 100%;//relative相对定位,相对于其正常位置进行定位,比如left:20px,相对于其正常位置向左偏移20个像素
height: 100%;
background-color: silver;
top: 0px;
left: 0px;
opacity: 0.5;//遮罩透明度
} .showmasklayer {
position: absolute;//绝对定位,相对于该元素之外的第一个父元素进行定位
z-index:;
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:;
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:;
width: 100%;
height: 100%;
background-color: silver;
top: 0px;
left: 0px;
opacity: 0.5;
} .showmasklayer {
position: absolute;
z-index:;
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:;
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:;
width: 100%;
height: 100%;
background-color: silver;
top: 0px;
left: 0px;
opacity: 0.5;
} .showmasklayer {
position: absolute;
z-index:;
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:;
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:;
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%;'/>")
}
}

jquery 遮罩层显示img的更多相关文章

  1. jQuery遮罩层插件

    在网页上常常遇到须要等待非常久的操作,比方导出报表等.为了预防用户点击其它操作或者多次点击同个功能,须要用遮罩层把页面或者操作区盖住.防止用户进行下一步操作.同一时候能够提高界面友好度,让用户知道操作 ...

  2. jQuery遮罩层登录对话框

    用户登录是许多网站必备的功能.有一种方式就是不管在网站的哪个页面,点击登录按钮就会弹出一个遮罩层,显示用户登录的对话框.这用方式比较灵活方便.而现在扫描二维码登录的方式也是很常见,例如QQ.微信.百度 ...

  3. jQuery遮罩层的实现

    遮罩层其实就是一个占据整个页面的半透明效果的页面元素,一般用div实现.页面中实现遮罩层,无非就是为了让用户只能操作弹出窗口的内容,而不允许操作弹出窗口外的内容. 在实现时,我使用了两个div,一个遮 ...

  4. JS+CSS简单实现DIV遮罩层显示隐藏【转藏】

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. JS+CSS简单实现DIV遮罩层显示隐藏

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. z-index设置后导致遮罩层显示跳动问题

    如图,1,3为top,bottom div,2为iscroll,4为遮罩层,如果1设置z-index后,不设置遮挡不住2,遮罩层4弹出会卡顿,既不设置z-index,又能遮挡iscroll的办法是在h ...

  7. jquery遮罩层

    (function () { //遮罩层实现 zhe zhao ceng kexb 2016.2.24 $.extend($.fn, { mask: function (msg, maskDivCla ...

  8. jQuery遮罩层效果

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. 页面用一个遮罩层显示加载,加载完后隐藏该div

    <div id="background" class="background" style="display: none; "> ...

随机推荐

  1. 定点数(fixed-point number)

    定义 定点数(fixed-point number)就是小数点位置固定的数,也就是说,小数点后面的位数是固定的,比如要记录一笔账目,这些账目的数字都不会超过100,就可以使用2位小数位定点数来记录,比 ...

  2. 2. socket结构体——表示socket地址

    一.两种通用socket结构体 1. sockaddr struct sockaddr { sa_family_t sa_family; // 地址族 char sa_data[14]; // 存放s ...

  3. 《安装ubuntu及VMware以及相关问题汇总》

    一.VMware Ubuntu安装详细过程 http://blog.csdn.net/u013142781/article/details/50529030 二.VMware Tools (ubunt ...

  4. 【转】C++后台开发之我见

    工作也快两年了,偶然看到自己以前写过的一些技术博客,发现自己自毕业后一直没有更新过自己的技术博客,趁现在是刚过完春节快要回公司工作之际,谈谈我个人对后台开发的一些个人见解,希望能够对在校的学生或者刚刚 ...

  5. 第三周的psp

    PSP: 进度条: 累计进度图: 本周PSP饼状图:

  6. Huffuman树

    问题描述 Huffman树在编码中有着广泛的应用.在这里,我们只关心Huffman树的构造过程. 给出一列数{pi}={p0, p1, …, pn-1},用这列数构造Huffman树的过程如下: 1. ...

  7. Sass的命令编译

    [Sass]命令编译 命令编译是指使用你电脑中的命令终端,通过输入 Sass 指令来编译 Sass.这种编译方式是最直接也是最简单的一种方式.因为只需要在你的命令终端输入: 单文件编译: sass & ...

  8. Spring Bean注册和加载

    Spring解密 - XML解析 与 Bean注册 Spring解密 - 默认标签的解析 Spring解密 - 自定义标签与解析 Spring解密 - Bean的加载流程

  9. 【bzoj1737】[Usaco2005 jan]Naptime 午睡时间 dp

    题目描述 Goneril is a very sleep-deprived cow. Her day is partitioned into N (3 <= N <= 3,830) equ ...

  10. 【题解】洛谷9月月赛加时赛 —— Never·island

    有趣有趣~ヾ(✿゚▽゚)ノ真的很有意思的一道dp题!感觉可以提供很多非常有意思的思路~ 现场打的时候考虑了很久,但并没有做出来,主要还是卡在了两个地方:1.考虑到按照端点来进行dp,但没有办法将两个端 ...