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操作Select 简单方便 一个js插件搞定
Nov 12 Javascript
Javascript学习笔记5 类和对象
Jan 11 Javascript
JS 实现Json查询的方法实例
Apr 12 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
Mar 18 Javascript
jQuery实现checkbox全选的方法
Jun 10 Javascript
Javascript闭包实例详解
Nov 29 Javascript
理解Javascript图片预加载
Feb 23 Javascript
微信小程序 location API接口详解及实例代码
Oct 12 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
Apr 18 Javascript
vue router学习之动态路由和嵌套路由详解
Sep 21 Javascript
详解javascript 正则表达式之分组与前瞻匹配
May 30 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
Apr 07 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
跟我学小偷程序之成功偷取首页(第三天)
2006/10/09 PHP
PHP上传文件及图片到七牛的方法
2018/07/25 PHP
基于mouseout和mouseover等类似事件的冒泡问题解决方法
2013/11/18 Javascript
通过隐藏iframe实现文件下载的js方法介绍
2014/02/26 Javascript
在Javascript中处理字符串之big()方法的使用
2015/06/08 Javascript
封装好的javascript前端分页插件pagination
2016/01/04 Javascript
JavaScript对象参数的引用传递
2016/01/14 Javascript
原生JS查找元素的方法(推荐)
2016/11/22 Javascript
JavaScript登录验证基础教程
2017/11/01 Javascript
vue2.0 和 animate.css的结合使用
2017/12/12 Javascript
zTree树形菜单交互选项卡效果的实现方法
2017/12/25 Javascript
vue实现信息管理系统
2020/05/30 Javascript
jQuery+ajax实现用户登录验证
2020/09/13 jQuery
基于jQuery拖拽事件的封装
2020/11/29 jQuery
学习python (1)
2006/10/31 Python
Python中的__SLOTS__属性使用示例
2015/02/18 Python
python实现求最长回文子串长度
2018/01/22 Python
解决Python数据可视化中文部分显示方块问题
2020/05/16 Python
python dir函数快速掌握用法技巧
2020/12/09 Python
使用phonegap获取设备的一些信息方法
2017/03/31 HTML / CSS
施华洛世奇天猫官方旗舰店:SWAROVSKI
2017/04/17 全球购物
澳大利亚在线时尚精品店:Hello Molly
2018/02/26 全球购物
中专毕业自我鉴定
2013/10/16 职场文书
班组长的岗位职责
2013/12/09 职场文书
可贵的沉默教学反思
2014/02/06 职场文书
应届毕业生应聘自荐信范文
2014/02/26 职场文书
物理学专业求职信
2014/07/04 职场文书
网吧消防安全责任书
2014/07/29 职场文书
员工趣味活动方案
2014/08/27 职场文书
在职员工证明书
2014/09/19 职场文书
户籍证明模板
2014/09/28 职场文书
县政协领导班子群众路线教育实践活动四风问题整改方案
2014/10/26 职场文书
综治工作汇报材料
2014/10/27 职场文书
疑《守望先锋2》A测截图泄露 或将推出新模式、新界面
2022/04/03 其他游戏
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python
Windows server 2022创建创建林、域树、子域的步骤
2022/06/25 Servers