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 相关文章推荐
JavaScript arguments 多参传值函数
Oct 24 Javascript
js实现幻灯片效果(基于jquery插件)
Nov 05 Javascript
jQuery Ajax异步处理Json数据详解
Nov 05 Javascript
JS实现进入页面时渐变背景色的方法
Feb 25 Javascript
jquery中checkbox使用方法简单实例演示
Nov 24 Javascript
jQuery qrcode生成二维码的方法
Apr 03 Javascript
详解vue 中使用 AJAX获取数据的方法
Jan 18 Javascript
vue自定v-model实现表单数据双向绑定问题
Sep 03 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
Jul 28 Javascript
vue+vant实现购物车全选和反选功能
Nov 17 Vue.js
javascript实现计算器功能详解流程
Nov 01 Javascript
angular4实现带搜索的下拉框
Mar 25 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 表单验证实现代码
2009/03/10 PHP
php错误级别的设置方法
2013/06/17 PHP
Linux中为php配置伪静态
2014/12/17 PHP
PHP面向对象之后期静态绑定功能介绍
2015/05/18 PHP
PHP实现判断数组是一维、二维或几维的方法
2017/02/06 PHP
php 如何设置一个严格控制过期时间的session
2017/05/05 PHP
认识延迟时间为0的setTimeout
2008/05/16 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
2014/05/23 Javascript
javascript抽象工厂模式详细说明
2014/12/16 Javascript
jQuery 遍历函数详解
2015/07/05 Javascript
Backbone中View之间传值的学习心得
2016/08/09 Javascript
微信小程序 input输入框详解及简单实例
2017/01/10 Javascript
微信小程序自定义prompt组件步骤详解
2018/06/12 Javascript
vue里input根据value改变背景色的实例
2018/09/29 Javascript
[01:31]DOTA2上海特级锦标赛 SECRET战队完整宣传片
2016/03/16 DOTA
django model去掉unique_together报错的解决方案
2016/10/18 Python
Python2和Python3中print的用法示例总结
2017/10/25 Python
python中lambda()的用法
2017/11/16 Python
python 中文件输入输出及os模块对文件系统的操作方法
2018/08/27 Python
使用Python如何测试InnoDB与MyISAM的读写性能
2018/09/18 Python
Django使用AJAX调用自己写的API接口的方法
2019/03/06 Python
Python 实例方法、类方法、静态方法的区别与作用
2019/08/14 Python
python编写猜数字小游戏
2019/10/06 Python
Python函数默认参数常见问题及解决方案
2020/03/26 Python
日本动漫周边服饰销售网站:Atsuko
2019/12/16 全球购物
eBay荷兰购物网站:eBay.nl
2020/06/26 全球购物
阿迪达斯越南官网:adidas越南
2020/07/19 全球购物
学前教育毕业生自荐信范文
2013/12/24 职场文书
运动会广播稿60字
2014/01/15 职场文书
贷款承诺书范文
2014/05/19 职场文书
2014年教师党员自我评价范文
2014/09/22 职场文书
拾金不昧表扬稿
2015/01/16 职场文书
学习师德师风的心得体会(2篇)
2019/10/08 职场文书
vue中利用mqtt服务端实现即时通讯的步骤记录
2021/07/01 Vue.js
Java+swing实现抖音上的表白程序详解
2022/06/25 Java/Android
nginx七层负载均衡配置详解
2022/07/15 Servers