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 相关文章推荐
微博@符号的用户名提示效果。(想@到谁?)
Nov 05 Javascript
jQuery代码优化 遍历篇
Nov 01 Javascript
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
Jan 11 Javascript
Js日期选择器并自动加入到输入框中示例代码
Aug 02 Javascript
js防止表单重复提交的两种方法
Sep 30 Javascript
js动态创建标签示例代码
Jun 09 Javascript
D3.js实现文本的换行详解
Oct 14 Javascript
详解ECharts使用心得总结
Dec 06 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
Jun 05 Javascript
AngularJS 支付倒计时功能实现思路
Jun 05 Javascript
基于vue实现探探滑动组件功能
May 29 Javascript
JS实现刷新网页后之前浏览位置保持不变示例详解
Aug 14 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
实时抓取YAHOO股票报价的代码
2006/10/09 PHP
在服务端进行目录建立、删除,文件上传、删除的过程的php代码
2008/09/10 PHP
PHP 文件缓存的性能测试
2010/04/25 PHP
php获得网站访问统计信息类Compete API用法实例
2015/04/02 PHP
Laravel 5框架学习之Blade 简介
2015/04/08 PHP
php的PDO事务处理机制实例分析
2017/02/16 PHP
PHP连接sftp并下载文件的方法教程
2018/08/26 PHP
详解PHP实现支付宝小程序用户授权的工具类
2018/12/25 PHP
PHP 7.4中使用预加载的方法详解
2019/07/08 PHP
在Laravel中实现使用AJAX动态刷新部分页面
2019/10/15 PHP
javascript 表格排序和表头浮动效果(扩展SortTable)
2009/04/07 Javascript
Js如何判断客户端是PC还是手持设备简单分析
2012/11/22 Javascript
jQuery select自动选中功能实现方法分析
2016/11/28 Javascript
JavaScript创建对象_动力节点Java学院整理
2017/06/27 Javascript
浅谈Vue.js中的v-on(事件处理)
2017/09/05 Javascript
vue 组件中slot插口的具体用法
2018/04/03 Javascript
JavaScript引用类型Date常见用法实例分析
2018/08/08 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
2019/03/19 jQuery
vue ajax 拦截原理与实现方法示例
2019/11/29 Javascript
python处理html转义字符的方法详解
2016/07/01 Python
基于python脚本实现软件的注册功能(机器码+注册码机制)
2016/10/09 Python
python实现画圆功能
2018/01/25 Python
Python实现通过继承覆盖方法示例
2018/07/02 Python
python sort、sort_index方法代码实例
2019/03/28 Python
在Django下创建项目以及设置settings.py教程
2019/12/03 Python
Django Admin后台添加数据库视图过程解析
2020/04/01 Python
利用CSS3实现炫酷的飞机起飞动画
2016/09/17 HTML / CSS
英国度假别墅预订:Sykes Cottages
2017/06/12 全球购物
Notino希腊:购买香水和美容产品
2019/07/25 全球购物
环境科学专业个人求职信
2013/12/15 职场文书
企业安全生产责任书
2014/04/14 职场文书
大学生工作求职信
2014/06/23 职场文书
2015年体检中心工作总结
2015/05/27 职场文书
导游词之珠海轮廓
2019/10/25 职场文书
基于Python实现股票收益率分析
2022/04/02 Python
MySQL中优化SQL语句的方法(show status、explain分析服务器状态信息)
2022/04/09 MySQL