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 相关文章推荐
js ondocumentready onmouseover onclick onmouseout 样式
Jul 22 Javascript
zShowBox 图片放大展示jquery版 兼容性
Sep 24 Javascript
JS实现的自定义右键菜单实例二则
Sep 01 Javascript
谈谈impress.js初步理解
Sep 09 Javascript
有关json_decode乱码及NULL的问题
Oct 13 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
Jan 27 Javascript
javascript运算符——逻辑运算符全面解析
Jun 27 Javascript
AngularJs Dependency Injection(DI,依赖注入)
Sep 02 Javascript
bootstrap模态框消失问题的解决方法
Dec 02 Javascript
layui表格 返回的数据状态异常的解决方法
Sep 10 Javascript
vue远程加载sfc组件思路详解
Dec 25 Javascript
详解React路由传参方法汇总记录
Nov 29 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
让Json更懂中文(JSON_UNESCAPED_UNICODE)
2011/10/27 PHP
数组与类使用PHP的可变变量名需要的注意的问题
2013/06/20 PHP
php中jpgraph类库的使用介绍
2013/08/08 PHP
PHP 使用redis简单示例分享
2015/03/05 PHP
php中动态调用函数的方法
2015/03/16 PHP
PHP如何根据文件头检测文件类型实例代码
2018/10/14 PHP
PHP中将一个字符串部分字符用星号*替代隐藏的实现代码
2019/09/08 PHP
laravel http 自定义公共验证和响应的方法
2019/09/29 PHP
学习YUI.Ext 第四天--对话框Dialog的使用
2007/03/10 Javascript
转换字符串为json对象的方法详解
2013/11/29 Javascript
AngularJS HTML编译器介绍
2014/12/06 Javascript
JavaScript提高网站性能优化的建议(二)
2016/07/24 Javascript
实现一个简单的vue无限加载指令方法
2017/01/10 Javascript
Vuex简单入门
2017/04/19 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
2017/08/31 Javascript
详解.vue文件中style标签的几个标识符
2018/07/17 Javascript
详解angular部署到iis出现404解决方案
2018/08/14 Javascript
javascript中call()、apply()的区别
2019/03/21 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
2020/05/27 Javascript
Python Web开发模板引擎优缺点总结
2014/05/06 Python
Python 常用string函数详解
2016/05/30 Python
Python中第三方库Requests库的高级用法详解
2017/03/12 Python
python实现用户管理系统
2018/01/10 Python
python实现AES加密和解密
2019/03/27 Python
Pycharm 2020最新永久激活码(附最新激活码和插件)
2020/09/17 Python
美国木工工具和用品商店:Woodcraft
2019/10/30 全球购物
继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么?
2015/11/18 面试题
语文教育专业推荐信范文
2013/11/25 职场文书
数控专业大学毕业生职业规划范文
2014/02/06 职场文书
2014年教研活动总结范文
2014/04/26 职场文书
大学生感恩父母演讲稿
2014/08/28 职场文书
千手观音观后感
2015/06/03 职场文书
Python趣味挑战之实现简易版音乐播放器
2021/05/28 Python
教你如何用Python实现人脸识别(含源代码)
2021/06/23 Python
vue-cil之axios的二次封装与proxy反向代理使用说明
2022/04/07 Vue.js
docker compose 部署 golang 的 Athens 私有代理问题
2022/04/28 Servers