用js+iframe形成页面的一种遮罩效果的具体实现


Posted in Javascript onDecember 31, 2013

用这锻代码 之前请先下载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"); 
} 
}
Javascript 相关文章推荐
在你的网页中嵌入外部网页的方法
Apr 02 Javascript
父子窗体间传递JSON格式的数据的代码
Dec 25 Javascript
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
Jan 06 Javascript
JS之Date对象和获取系统当前时间详解
Jan 13 Javascript
javascript实现英文首字母大写
Apr 23 Javascript
HTML中使背景图片自适应浏览器大小实例详解
Apr 06 Javascript
js实现本地图片文件拖拽效果
Jul 18 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
Aug 07 Javascript
AngularJS实现注册表单验证功能
Oct 16 Javascript
JS+CSS实现滚动数字时钟效果
Dec 25 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
Sep 06 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
js类式继承的具体实现方法
Dec 31 #Javascript
利用javascript判断文件是否存在
Dec 31 #Javascript
jquery实现checkbox全选全不选的简单实例
Dec 31 #Javascript
屏蔽IE弹出&quot;您查看的网页正在试图关闭窗口,是否关闭此窗口&quot;的方法
Dec 31 #Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
Dec 31 #Javascript
IE与FireFox的JavaScript兼容问题解决办法
Dec 31 #Javascript
jquery遍历select元素(实例讲解)
Dec 31 #Javascript
You might like
php中的数组操作函数整理
2008/08/18 PHP
浅谈PHP中单引号和双引号到底有啥区别呢?
2015/03/04 PHP
PHP入门教程之PHP操作MySQL的方法分析
2016/09/11 PHP
laravel5.1 ajax post 传值_token示例
2019/10/24 PHP
json格式化/压缩工具 Chrome插件扩展版
2010/05/25 Javascript
JS 自定义带默认值的函数
2011/07/21 Javascript
改进版通过Json对象实现深复制的方法
2012/10/24 Javascript
一个JS的日期格式化算法示例
2013/07/31 Javascript
jquery ready函数、css函数及text()使用示例
2013/09/27 Javascript
Javascript排序算法之计数排序的实例
2014/04/05 Javascript
jQuery中find()方法用法实例
2015/01/07 Javascript
JavaScript定时器和优化的取消定时器方法
2015/07/03 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
2016/05/03 Javascript
简单了解JavaScript操作XPath的一些基本方法
2016/06/03 Javascript
Bootstrap实现弹性搜索框
2016/07/11 Javascript
浅谈javascript中关于日期和时间的基础知识
2016/07/13 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
2016/12/07 Javascript
element-ui表格合并span-method的实现方法
2019/05/21 Javascript
Vue插件之滑动验证码
2019/09/21 Javascript
微信小程序实现一个简单swiper代码实例
2019/12/30 Javascript
package.json中homepage属性的作用详解
2020/03/11 Javascript
讲解Python中for循环下的索引变量的作用域
2015/04/15 Python
详解Django中Request对象的相关用法
2015/07/17 Python
Centos7 Python3下安装scrapy的详细步骤
2018/03/15 Python
解决pycharm工程启动卡住没反应的问题
2019/01/19 Python
tensorflow获取预训练模型某层参数并赋值到当前网络指定层方式
2020/01/24 Python
Python 动态变量名定义与调用方法
2020/02/09 Python
Django-Scrapy生成后端json接口的方法示例
2020/10/06 Python
让IE9以下版本的浏览器兼容HTML5的方法
2014/03/12 HTML / CSS
沃达丰英国有限公司:Vodafone英国
2019/04/16 全球购物
大学生毕业鉴定
2014/01/31 职场文书
最新结婚典礼主持词
2014/03/14 职场文书
团日活动总结
2014/04/28 职场文书
2014年入党积极分子党校培训心得体会
2014/07/08 职场文书
2015年秋季校长开学典礼致辞
2015/07/29 职场文书
JavaCV实现照片马赛克效果
2022/01/22 Java/Android