js工具方法弹出蒙版


Posted in Javascript onMay 08, 2013
//工具方法弹出蒙版 add by dning 2012-11-4
var maskShow = (function () {
    var mask = null;
    var curr = null;
    var free = false;
    var func = {
        onresize: null,
        onscroll: null
    };
    return function (el, fre, Type) {
        if (!mask) {
            initMask();
        }
        free = !!fre;
        if (el == null) {
            show(curr, false);
            show(mask, false);
            showSelects(true); //for ie6
            curr = null;
            if (!free) for (var s in func) {
                window[s] = func[s];
                func[s] = null;
            }
        } else {
            if (curr)
                show(curr, false);
            curr = $(el)[0];
            checkVisib(curr);
            rePos();
            mask.style.zIndex = maskShow.zIndexBack || 15;
            curr.style.zIndex = maskShow.zIndexFore || 20;
            show(curr, true);
            show(mask, true);
            showSelects(false, el); //for ie6
            if (!free) for (var s in func) {
                func[s] = window[s];
                window[s] = rePos;
            }
        }
        if (Type == 0) {
            mask.style.width = document.body.clientWidth + 'px';
            mask.style.height = document.body.clientHeight + 'px';
            if (el) el.style.position = "fixed";
        } else {
            mask.style.width = "0px";
            mask.style.height = "0px";
            if (el) el.style.position = "absolute";
        }
    };
    function showSelects(b, box) {
        if (!browser.IE6) return;
        var sel = document.getElementsByTagName('select');
        var vis = b ? 'visible' : 'hidden';
        for (var i = 0; i < sel.length; i++) {
            if ((b || !childOf(sel[i], box)) && sel[i].currentStyle.visibility != vis) sel[i].style.visibility = vis;
        }
    }
    function childOf(a, b) {
        while (a && a != b) a = a.parentNode;
        return a == b;
    }
    function initMask() {
        /*
        mask=document.createElement('iframe');
        mask.src='://0';
        */
        mask = document.createElement('div');
        mask.style.cssText = 'background-color:{$c};border:none;position:absolute;visibility:hidden;opacity:{$a};filter:alpha(opacity={$A})'.replaceWith({
            c: maskShow.bgColor || '#000',
            a: maskShow.bgAlpha || '0.5',
            A: maskShow.bgAlpha ? parseInt(maskShow.bgAlpha * 100) : '50'
        }); 
        document.body.appendChild(mask);
        maskShow.mask = mask;
    }
    function checkVisib(el) {
        var sty = el.style;
        sty.position = 'absolute';
        sty.left = '-10000px';
        sty.top = '-10000px';
        sty.visibility = 'visible';
        sty.display = 'block';
        sty.zIndex = 10;
    }
    function rePos() {
        if (!curr) return;
        var ps = $pageSize('doc');
        setRect(mask, ps);
        var rc = centerPos(ps, curr.offsetWidth, curr.offsetHeight);
        if (rc.left < ps.scrollLeft) rc.left = ps.scrollLeft;
        if (rc.top < ps.scrollTop) rc.top = ps.scrollTop;
        setRect(curr, rc);
    }
    function centerPos(ps, cw, ch) {
        return {
            left: ((ps.winWidth - cw) >> 1) + ps.scrollLeft + (maskShow.adjustX || 0),
            top: ((ps.winHeight - ch) >> 1) + ps.scrollTop + (maskShow.adjustY || 0)
        };
    }
    function setRect(el, rect) {
        var sty = el.style;
        sty.left = (rect.left || 0) + 'px';
        sty.top = (rect.top || 0) + 'px';
        if ('width' in rect)
            sty.width = rect.width + 'px';
        if ('height' in rect)
            sty.height = rect.height + 'px';
    }
    function show(el, b) {
        if (!el) return;
        el.style.visibility = 'visible';
        if (!b) {
            el.style.left = -el.offsetWidth - 100 + 'px';
            el.style.top = -el.offsetHeight - 100 + 'px';
        }
    }
})();
Javascript 相关文章推荐
制作高质量的JQuery Plugin 插件的方法
Apr 20 Javascript
Extjs中DisplayField的日期或者数字格式化扩展
Sep 03 Javascript
js选择并转移导航菜单示例代码
Aug 19 Javascript
node.js中的fs.fsyncSync方法使用说明
Dec 15 Javascript
jquery实现两边飘浮可关闭的对联广告
Nov 27 Javascript
jQuery+正则+文本框只能输入数字的实现方法
Oct 07 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
Dec 07 Javascript
Vue项目中如何引入icon图标
Mar 28 Javascript
vue组件实践之可搜索下拉框功能
Nov 25 Javascript
vue操作动画的记录animate.css实例代码
Apr 26 Javascript
了解在JavaScript中将值转换为字符串的5种方法
Jun 06 Javascript
weui上传多图片,压缩,base64编码的示例代码
Jun 22 Javascript
基于JavaScript 声明全局变量的三种方式详解
May 07 #Javascript
你必须知道的JavaScript 变量命名规则详解
May 07 #Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
May 07 #Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
May 07 #Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
May 07 #Javascript
JS中的substring和substr函数的区别说明
May 07 #Javascript
js图片自动切换效果处理代码
May 07 #Javascript
You might like
一道关于php变量引用的面试题
2010/08/08 PHP
回帖脱衣服的图片实现代码
2014/02/15 PHP
使用PHP接受文件并获得其后缀名的方法
2015/08/05 PHP
在IE模态窗口中自由查看HTML源码的方法
2007/03/08 Javascript
JavaScript 自动完成脚本整理(33个)
2009/10/20 Javascript
JavaScript prototype属性使用说明
2010/05/13 Javascript
js鼠标点击图片实现随机变换图片的方法
2015/02/16 Javascript
jquery获取img的src值的简单实例
2016/05/17 Javascript
深入理解node exports和module.exports区别
2016/06/01 Javascript
浅谈vue异步数据影响页面渲染
2019/10/29 Javascript
nodejs开发一个最简单的web服务器实例讲解
2020/01/02 NodeJs
JavaScript 类的封装操作示例详解
2020/05/16 Javascript
Angular8 简单表单验证的实现示例
2020/06/03 Javascript
[03:12]2016完美“圣”典风云人物:单车专访
2016/12/02 DOTA
深入解析Python中的descriptor描述器的作用及用法
2016/06/27 Python
Unicode和Python的中文处理
2017/03/19 Python
PyCharm代码提示忽略大小写设置方法
2018/10/28 Python
详解pyenv下使用python matplotlib模块的问题解决
2018/11/29 Python
Python空间数据处理之GDAL读写遥感图像
2019/08/01 Python
利用setuptools打包python程序的方法步骤
2020/01/18 Python
Pandas的Apply函数具体使用
2020/07/21 Python
解决Python3.8运行tornado项目报NotImplementedError错误
2020/09/02 Python
python把一个字符串切开的实例方法
2020/09/27 Python
Selenium 安装和简单使用的实现
2020/12/04 Python
浅谈HTML5新增及移除的元素
2016/06/27 HTML / CSS
淘宝网店营销策划书
2014/01/11 职场文书
大学生两会学习心得体会
2014/03/10 职场文书
大学计划书范文800字
2014/08/14 职场文书
2014年计生协会工作总结
2014/11/21 职场文书
2014年学前班工作总结
2014/12/08 职场文书
病假证明模板
2015/06/19 职场文书
教师读书笔记
2015/06/29 职场文书
2015年学校政教工作总结
2015/07/20 职场文书
导游词之韩国济州岛
2019/10/28 职场文书
教你利用python实现企业微信发送消息
2021/05/23 Python
详解Oracle块修改跟踪功能
2021/11/07 Oracle