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

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

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

实现如下：

  1.    //遮罩层
  2.     .showmask {
  3.             position: fixed;//position设置为fixed或者absolute或者relative，z-index才生效，且z-index值越大越显示到顶层
  4.             z-index:;//fixed固定定位，相对于浏览器窗口
  5.             width: 100%;//relative相对定位，相对于其正常位置进行定位，比如left:20px，相对于其正常位置向左偏移20个像素
  6.             height: 100%;
  7.             background-color: silver;
  8.             top: 0px;
  9.             left: 0px;
  10.             opacity: 0.5;//遮罩透明度
  11.         }
  12.  
  13.         .showmasklayer {
  14.             position: absolute;//绝对定位，相对于该元素之外的第一个父元素进行定位
  15.             z-index:;
  16.             top: 0px;
  17.             left: 0px;
  18.             min-width: 100%;
  19.             min-height: 100%;
  20.             display: flex;//多列布局
  21.             justify-content: center;//设置元素在主轴(横轴)上的对其方式
  22.             align-items: center;//当前行侧轴(纵轴)方向上的对齐方式
  23.         }
  24.        //关闭按钮
  25.         .showmaskclose {
  26.             background-color: red;
  27.             color: white;
  28.             border: 2px solid gray;
  29.             position: fixed;
  30.             z-index:;
  31.             top: 0px;
  32.             right: 0px;
  33.             cursor: pointer;
  34.             height: 30px;
  35.             width: 30px;
  36.             font-size: large;
  37.             font-weight: bold;
  38.             text-align: center;
  39.             display: flex;
  40.             justify-content: center;
  41.             align-items: center;
  42.         }

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

  1.        .showmask {
  2.             position: fixed;
  3.             z-index:;
  4.             width: 100%;
  5.             height: 100%;
  6.             background-color: silver;
  7.             top: 0px;
  8.             left: 0px;
  9.             opacity: 0.5;
  10.         }
  11.  
  12.         .showmasklayer {
  13.             position: absolute;
  14.             z-index:;
  15.             top: 0px;
  16.             left: 0px;
  17.             /*min-width: 100%; 这里默认显示100%，不能超过100%
  18.             min-height: 100%;*/
  19.             width: 100%;
  20.             height: 100%;
  21.             display: flex;
  22.             justify-content: center;
  23.             align-items: center;
  24.         }
  25.  
  26.             .showmasklayer img {
  27.                 max-width: 100%;/*图片最大宽高都是100%*/
  28.                 max-height: 100%;
  29.             }
  30.  
  31.         .showmaskclose {
  32.             background-color: red;
  33.             color: white;
  34.             border: 2px solid gray;
  35.             position: fixed;
  36.             z-index:;
  37.             top: 0px;
  38.             right: 0px;
  39.             cursor: pointer;
  40.             height: 30px;
  41.             width: 30px;
  42.             font-size: large;
  43.             font-weight: bold;
  44.             text-align: center;
  45.             display: flex;
  46.             justify-content: center;
  47.             align-items: center;
  48.         }

iframe中调用如下：

  1.  $(function () {
  2.         $("#image").on("click", function () {
  3.             //判断是否已经添加过遮罩层dom
  4.             if ($(".showmaskclose", window.top.document).length == 0) {
  5.                 //附加遮罩层dom
  6.                 $("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>");
  7.                 //附加后绑定事件
  8.                 $(".showmaskclose", window.top.document).on("click", function () { htsHide(); })
  9.                 $(".showmask", window.top.document).on("dblclick", function () { htsHide(); })
  10.                 $(".showmasklayer", window.top.document).on("dblclick", function () { htsHide(); })
  11.                 //添加图片
  12.                 $(".showmasklayer", window.top.document).append("<img src='" + this.src + "' />")
  13.             }
  14.             else {
  15.                 //遮罩层dom显示
  16.                 $(".showmaskclose", window.top.document).show();//可通过css设置display为none和block控制显示和隐藏
  17.                 $(".showmask", window.top.document).show();
  18.                 $(".showmasklayer", window.top.document).show();
  19.                 //切换图片
  20.                 $(".showmasklayer > img", window.top.document).attr('src', this.src);
  21.             }
  22.         });
  23.     });
  24.     function htsHide() {
  25.         //遮罩层隐藏
  26.         $(".showmask", window.top.document).hide();
  27.         $(".showmaskclose", window.top.document).hide();
  28.         $(".showmasklayer", window.top.document).hide();
  29.     }

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

  1. $(function () {
  2.         $("#image").on("click", function () {
                //添加遮罩层
  3.             $("body", window.top.document).append("<div class='showmaskclose'>×</div>").append("<div class='showmask'></div>").append("<div class='showmasklayer'></div>")
  4.             //绑定遮罩层事件
  5.             $(".showmaskclose", window.top.document).on("click", function () { htsHide(); })
  6.             $(".showmask", window.top.document).on("dblclick", function () { htsHide(); })
  7.             $(".showmasklayer", window.top.document).on("dblclick", function () { htsHide(); })
  8.             $(".showmasklayer", window.top.document).append("<img src='" + this.src + "' />")
  9.         });
  10.     });
  11.     function htsHide() {
            //移除遮罩层
  12.         $(".showmaskclose", window.top.document).remove();
  13.         $(".showmask", window.top.document).remove();
  14.         $(".showmasklayer", window.top.document).remove();
  15.     }

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

css：

  1. .showmask {
  2.             position: fixed;
  3.             z-index:;
  4.             width: 100%;
  5.             height: 100%;
  6.             background-color: silver;
  7.             top: 0px;
  8.             left: 0px;
  9.             opacity: 0.5;
  10.         }
  11.  
  12.         .showmasklayer {
  13.             position: absolute;
  14.             z-index:;
  15.             top: 0px;
  16.             left: 0px;
  17.             width: 100%;
  18.             height: 100%;
  19.             display: flex;
  20.             justify-content: center;
  21.             align-items: center;
  22.         }
  23.  
  24.             .showmasklayer img {
  25.                 max-width: 100%;
  26.                 max-height: 100%;
  27.             }
  28.  
  29.         .showmaskrotate {/*实现旋转的按钮*/
  30.             background-color: Highlight;
  31.             color: white;
  32.             border: 2px solid gray;
  33.             position: fixed;
  34.             z-index:;
  35.             top: 0px;
  36.             right: 40px;
  37.             cursor: pointer;
  38.             height: 30px;
  39.             width: 30px;
  40.             font-size: large;
  41.             font-weight: bold;
  42.             text-align: center;
  43.             display: flex;
  44.             justify-content: center;
  45.             align-items: center;
  46.         }
  47.  
  48.         .showmaskclose {
  49.             background-color: red;
  50.             color: white;
  51.             border: 2px solid gray;
  52.             position: fixed;
  53.             z-index:;
  54.             top: 0px;
  55.             right: 0px;
  56.             cursor: pointer;
  57.             height: 30px;
  58.             width: 30px;
  59.             font-size: large;
  60.             font-weight: bold;
  61.             text-align: center;
  62.             display: flex;
  63.             justify-content: center;
  64.             align-items: center;
  65.         }

js,rotate实现:

  1. /**
  2.  * jquery-rotate v0.1.0
  3.  *  Very lightweight jquery rotate plugin using CSS 3 Transformation
  4.  *  https://github.com/schickling/jquery-rotate*/
  5. (function ($) {
  6.  
  7.     $.fn.extend({
  8.         rotate: function (deg) {
  9.  
  10.             // cache dom element
  11.             var $this = $(this);
  12.  
  13.             // make deg random if not set
  14.             if (deg === null) {
  15.                 deg = Math.floor(Math.random() * 359);
  16.             }
  17.  
  18.             // rotate dom element
  19.             $this.css({
  20.                 '-webkit-transform': 'rotate(' + deg + 'deg)',
  21.                 '-moz-transform': 'rotate(' + deg + 'deg)',
  22.                 '-ms-transform': 'rotate(' + deg + 'deg)',
  23.                 '-o-transform': 'rotate(' + deg + 'deg)',
  24.                 'transform': 'rotate(' + deg + 'deg)'
  25.             });
  26.  
  27.             // make chainable
  28.             return $this;
  29.         }
  30.     });
  31.  
  32. })(jQuery);

js，调用img遮罩：

  1.     function htsHide() {
  2.         $(".showmaskclose", window.top.document).remove();
  3.         $(".showmaskrotate", window.top.document).remove();
  4.         $(".showmask", window.top.document).remove();
  5.         $(".showmasklayer", window.top.document).remove();
  6.     }
  7.     oper = {
  8.         View: function (imagepath) {
  9.             $("body", window.top.document).append("<div class='showmaskclose'>×</div><div class='showmaskrotate'>⌒</div>").append("<div class='showmask'></div>").append("<div class='showmasklayer'></div>")
  10.             var tIndex = 0;//控制旋转次数
  11.             $(".showmaskclose", window.top.document).on("click", function () { htsHide(); })
  12.             $(".showmaskrotate", window.top.document).on("click", function () { $('.showmasklayer > img', window.top.document).rotate(-90 * ++tIndex); })//实现旋转功能，每次逆时针旋转90度
  13.             $(".showmask", window.top.document).on("dblclick", function () { htsHide(); })
  14.             $(".showmasklayer", window.top.document).on("dblclick", function () { htsHide(); })
  15.             $(".showmasklayer", window.top.document).append("<img src='" + imagepath + "' style='max-height:100%;max-width:100%;'/>")
  16.         }
  17.     }

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. 使用libpcab抓包&处理包

    #include <stdio.h> #include <stdlib.h> #include <strings.h> #include <string.h& ...

  2. PHPCMS v9表单向导中怎么加入验证码

    表单想到比较简单,所以没有加入验证码的功能.网上的类似教程又大多数不准确.所以亲自测试了一下,发现下面的方法是可用的.希望对有需求的朋友们有所帮助. 1.首先是调用表单的页面加入验证码.表单js调用模 ...

  3. 【week3】四人小组项目—东师论坛

    项目选题:东北师范大学论坛 小组名称:nice! 项目组长:李权 组员:于淼 刘芳芳 杨柳. 本周任务: 1.发布申请 功能列表: 1.注册,登录 2.校内信息公告推送 3.十大热点 (根据搜索量.评 ...

  4. week1 技术随笔

    类别c 内容c 开始时间s 结束时间e 被打断时间I 总计(min) 9.5 随笔 构建之法福后感 22:00 24:00 7 113 9.6 分析 需求分析 9:00 9:30 2 28 编码 词频 ...

  5. PAT-2018年冬季考试-乙级

    1091 N-自守数 代码: #include <bits/stdc++.h> using namespace std; int T; int A(int a) { ; while(a) ...

  6. 【Docker 命令】- attach命令

    docker attach :连接到正在运行中的容器. 语法 docker attach [OPTIONS] CONTAINER 要attach上去的容器必须正在运行,可以同时连接上同一个contai ...

  7. 2018年小米高级 PHP 工程师面试题（模拟考试卷）

    1.通过哪一个函数,可以把错误转换为异常处理? A:set_error_handler B:error_reporting C:error2exception D:catch 正确答案:A 答案分析: ...

  8. springBoot @EnableAutoConfiguration深入分析

    1.新建一个项目中需要提供配置类 2.在META-INF/spring.factorties在文件中配置 org.springframework.boot.autoconfigure.EnableAu ...

  9. C结构体【转】

    “结构”是一种构造类型,它是由若干“成员”组成的.每一个成员可以是一个基本数据类型或者又是一个构造类型.结构既是一种“构造”而成的数据类型,那么在说明和使用之前必须先定义它,也就是构造它.如同在说明和 ...

  10. SAPI 包含sphelper.h编译错误解决方案

    原文连接地址:http://blog.csdn.net/believenow_notfuture/article/details/52191229 [转]SAPI 包含sphelper.h编译错误解决 ...