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:;//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的更多相关文章
- jQuery遮罩层插件
在网页上常常遇到须要等待非常久的操作,比方导出报表等.为了预防用户点击其它操作或者多次点击同个功能,须要用遮罩层把页面或者操作区盖住.防止用户进行下一步操作.同一时候能够提高界面友好度,让用户知道操作 ...
- jQuery遮罩层登录对话框
用户登录是许多网站必备的功能.有一种方式就是不管在网站的哪个页面,点击登录按钮就会弹出一个遮罩层,显示用户登录的对话框.这用方式比较灵活方便.而现在扫描二维码登录的方式也是很常见,例如QQ.微信.百度 ...
- jQuery遮罩层的实现
遮罩层其实就是一个占据整个页面的半透明效果的页面元素,一般用div实现.页面中实现遮罩层,无非就是为了让用户只能操作弹出窗口的内容,而不允许操作弹出窗口外的内容. 在实现时,我使用了两个div,一个遮 ...
- JS+CSS简单实现DIV遮罩层显示隐藏【转藏】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS+CSS简单实现DIV遮罩层显示隐藏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- z-index设置后导致遮罩层显示跳动问题
如图,1,3为top,bottom div,2为iscroll,4为遮罩层,如果1设置z-index后,不设置遮挡不住2,遮罩层4弹出会卡顿,既不设置z-index,又能遮挡iscroll的办法是在h ...
- jquery遮罩层
(function () { //遮罩层实现 zhe zhao ceng kexb 2016.2.24 $.extend($.fn, { mask: function (msg, maskDivCla ...
- jQuery遮罩层效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 页面用一个遮罩层显示加载,加载完后隐藏该div
<div id="background" class="background" style="display: none; "> ...
随机推荐
- 转:Linux 编译安装 Mysql5.7
http://broqiang.com/2017/04/18/Mysql-Install-5.7.18-Linux-Compile/ 原文 Linux 编译安装 Mysql5.7 Ubuntu 下快速 ...
- 20145214实验一 Java开发环境的熟悉
20145214实验一 Java开发环境的熟悉 使用JDK编译.运行简单的java程序 命令行下程序开发 在命令行下建立20145214实验目录,进入该目录后创建exp1目录. 把代码保存到exp1目 ...
- C#2d命令行小游戏
[ 星 辰 · 第 二 条 约 定 ] 要求 空地:空格 | 边界/墙:'█' | 人物:'♜' 实现人物的上下左右移动 记录关系图.流程图.设计过程遇到的问题及解决 项目压缩包 [项目源码](htt ...
- DNS域名解析协议
一. 根域 就是所谓的“.”,其实我们的网址www.baidu.com在配置当中应该是www.baidu.com.(最后有一点),一般我们在浏览器里输入时会省略后面的点,而这也已经成为了习惯. 根域服 ...
- 【Linux】- vi/vim
所有的 Unix Like 系统都会内建 vi 文书编辑器,其他的文书编辑器则不一定会存在. 但是目前我们使用比较多的是 vim 编辑器. vim 具有程序编辑的能力,可以主动的以字体颜色辨别语法的正 ...
- 配置和修改springboot默认国际化文件
SpringBoot默认国际化文件为:classpath:message.properties,如果放在其它文件夹中,则需要在application.properties配置属性spring.mess ...
- [牛客Wannafly挑战赛27D]绿魔法师
description newcoder 给你一个空的可重集合\(S\). \(n\)次操作,每次操作给出\(x\),\(k\),\(p\),执行以下操作: \(opt\ 1\):在S中加入x. \( ...
- [NOI2006]网络收费
题面在这里 description 一棵\(2^n\)个叶节点的满二叉树,每个节点代表一个用户,有一个预先的收费方案\(A\)或\(B\); 对于任两个用户 \(i,j(1≤i<j≤2^n)i, ...
- BZOJ1503:[NOI2004]郁闷的出纳员——题解
http://www.lydsy.com/JudgeOnline/problem.php?id=1503 (题面复制的洛谷的,因为洛谷好看) 题目描述 OIER公司是一家大型专业化软件公司,有着数以万 ...
- Windows系统中Xshell与Linux连接时遇到的问题
前提条件:在Windows系统中已经安装了Xshell,并且安装了虚拟机软件和Linux系统 步骤1.在Linux系统中root用户下,使用ifconfig命令查看虚拟系统Linux的IP地址.如图1 ...