用js+iframe形成页面的一种遮罩效果的具体实现
更新时间：2013年12月31日 15:47:36 作者：
用js形成页面的一种遮罩效果，选择想要进行遮罩的窗口，在这里想要遮罩的是一个iframe窗口，具体的实现如下，感兴趣的朋友可以参参考下
用这锻代码 之前请先下载jquery库
var maskStackCount = 0;
function mask(method){
//这里是你想要进行遮罩的窗口，我这里想要遮罩的是一个iframe窗口，也可以用var winObj=$(window)
var winObj=window.top.$("body").find("iframe[name='dialognormaliframe']");
if(typeof method == "undefined"){
method="open";
}
if (method == "open") {
if (maskStackCount <= 0) {
var mask = $("<div id='window-mask' class='window-mask' style='display:none'></div>").appendTo("body");
mask.css({
width: winObj.width() + "px",
height: winObj.height() + "px",
filter: "alpha(opacity=60)"
}).show();
winObj.on("resize.mask", function(){
mask.css({
width: winObj.width() + "px",
height: winObj.height() + "px"
});
});
}
maskStackCount++;
}
else if(method == "close"){
maskStackCount--;
$("#window-mask").remove();
winObj.off("resize.mask");
}
}
复制代码 代码如下:
var maskStackCount = 0;
function mask(method){
//这里是你想要进行遮罩的窗口，我这里想要遮罩的是一个iframe窗口，也可以用var winObj=$(window)
var winObj=window.top.$("body").find("iframe[name='dialognormaliframe']");
if(typeof method == "undefined"){
method="open";
}
if (method == "open") {
if (maskStackCount <= 0) {
var mask = $("<div id='window-mask' class='window-mask' style='display:none'></div>").appendTo("body");
mask.css({
width: winObj.width() + "px",
height: winObj.height() + "px",
filter: "alpha(opacity=60)"
}).show();
winObj.on("resize.mask", function(){
mask.css({
width: winObj.width() + "px",
height: winObj.height() + "px"
});
});
}
maskStackCount++;
}
else if(method == "close"){
maskStackCount--;
$("#window-mask").remove();
winObj.off("resize.mask");
}
}
相关文章
这篇文章主要介绍了微信小程序实现天气预报功能(附源码)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上，这样其实点击的不是按钮而是Flash ，这样将需要的内容传入Flash，再通过Flash的复制功能把传入的内容复制到剪贴板2014-08-08
javascript中alert()与console.log()的区别
我们在做js调试的时候使用 alert 可以显示信息，调试程序，alert 弹出窗口会中断程序， 如果要在循环中显示信息，手点击关闭窗口都累死。而且 alert 显示对象永远显示为[object ]。 自己写的 log 虽然可以显示一些 object 信息，但很多功能支持都没有 console 好2015-08-08
这篇文章主要介绍了js实现仿微博滚动显示信息的效果,通过由上往下滚动来实现不断显示微博的，而且每一天新微博都是通过淡入效果显示的,需要的朋友可以参考下2015-12-12
不同浏览器或者版本之间对于console对象的支持不尽相同，而console方法在开发调试过程中都是不错的工具。难道要在上线前把所有console.xxxx去掉以保证某些浏览器不报错么。其实可以变通解决2013-10-10
这篇文章主要介绍了javascript设置和获取cookie的方法,结合实例形式较为详细的分析总结了JavaScript操作cookie简单实现数据存储与读取的相关技巧,需要的朋友可以参考下2016-01-01
在ECharts中,通过formatter函数自定义图例样式,可以实现更灵活的图表展示,满足特定的视觉需求,这篇文章主要介绍了echarts自定义tooltip中内容的相关资料,需要的朋友可以参考下2024-10-10
这篇文章主要为大家介绍了JavaScript数学对象Math操作数字的方法示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
这篇文章主要介绍了基于chosen插件实现人员选择树搜索自动筛选功能的相关资料,需要的朋友可以参考下2016-09-09
本文主要介绍了折叠菜单及选择器的运用。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
最新评论