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中判断一个值是否在数组中并没有直接使用
Dec 17 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
Mar 20 Javascript
jquery根据属性和index来查找属性值并操作
Jul 25 Javascript
js精美的幻灯片画集特效代码分享
Aug 29 Javascript
Javascript控制div属性动态变化实例分析
Oct 08 Javascript
JS实现简单的右下角弹出提示窗口完整实例
Jun 21 Javascript
js中string和number类型互转换技巧(分享)
Nov 28 Javascript
EasyUI学习之Combobox级联下拉列表(2)
Dec 29 Javascript
Windows下Node.js安装及环境配置方法
Sep 18 Javascript
vue-swiper的使用教程
Aug 30 Javascript
Vue中用props给data赋初始值遇到的问题解决
Nov 27 Javascript
springboot+vue实现文件上传下载
Nov 17 Vue.js
基于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
apache+mysql+php+ssl服务器之完全安装攻略
2006/09/05 PHP
提升PHP执行速度全攻略(上)
2006/10/09 PHP
几种有用的变型 PHP中循环语句的用法介绍
2012/01/30 PHP
PHP中对数组的一些常用的增、删、插操作函数总结
2015/11/27 PHP
yii2.0使用Plupload实现带缩放功能的多图上传
2015/12/22 PHP
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
2011/06/02 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
2013/07/17 Javascript
js实现鼠标经过时图片滚动停止的方法
2015/02/16 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
2015/06/10 Javascript
JavaScript基本数据类型及值类型和引用类型
2015/08/25 Javascript
AngularJS 让人爱不释手的八种功能
2016/03/23 Javascript
Angular Module声明和获取重载实例代码
2016/09/14 Javascript
浅谈JavaScript中promise的使用
2017/01/11 Javascript
js实现tab选项卡切换功能
2017/01/13 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
2017/12/09 Javascript
express如何使用session与cookie的方法
2018/01/30 Javascript
vue-router beforeEach跳转路由验证用户登录状态
2018/12/26 Javascript
在Layui中实现开关按钮的效果实例
2019/09/29 Javascript
vue动态禁用控件绑定disable的例子
2019/10/28 Javascript
JS实现打砖块游戏
2020/02/14 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
2020/11/06 Javascript
JavaScript 如何在浏览器中使用摄像头
2020/12/02 Javascript
[01:13:59]LGD vs Mineski Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
Python获取Linux系统下的本机IP地址代码分享
2014/11/07 Python
Python回调函数用法实例详解
2015/07/02 Python
Python使用SocketServer模块编写基本服务器程序的教程
2016/07/12 Python
Python中的日期时间处理详解
2016/11/17 Python
python3中bytes和string之间的互相转换
2017/02/09 Python
简单了解python协程的相关知识
2019/08/31 Python
浅谈Python中文件夹和python package包的区别
2020/06/01 Python
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
2013/03/25 HTML / CSS
工程师岗位职责规定
2014/02/26 职场文书
法律进学校实施方案
2014/03/15 职场文书
幼儿园中班下学期评语
2014/04/18 职场文书
百善孝为先:关于孝道的经典语录
2019/10/18 职场文书
tomcat正常启动但网页却无法访问的几种解决方法
2022/05/06 Servers