js工具方法弹出蒙版

 更新时间:2013年05月08日 10:29:27   转载 作者:  
js工具方法弹出蒙版,需要的朋友可以参考一下
复制代码 代码如下:

//工具方法弹出蒙版 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';
        }
    }
})();

相关文章

  • js中一个函数获取另一个函数返回值问题探讨

    js中一个函数获取另一个函数返回值问题探讨

    在本文将为大家详细探讨下js中一个函数获取另一个函数返回值问题,比较模糊的朋友可以学习下哦
    2013-11-11
  • JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)

    JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好

    最近做项目遇到表单在输入后立即验证,而不是提交后再验证,在网上找了下资料,没有合适的,于是我自己动手写了一个,分享到脚本之家平台,供大家参考
    2017-06-06
  • 微信小程序实现星星评价效果

    微信小程序实现星星评价效果

    这篇文章主要为大家详细介绍了微信小程序实现星星评价效果,支持多个条目评价,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • textarea支持图形编辑的实现方法

    textarea支持图形编辑的实现方法

    本来以为只有iframe支持编辑了,今天突然发现textarea也支持编辑 :( 是不是我太愚钝了? textarea不能用innerHTML来插入html,而用appendChild 这样的话稍微修改下,评论等简单的textarea的表情插入就可以直接显示出来了 而不是只显示emot了 比较实用标题起的确切,但如果叫“现textarea支持编辑”似乎更废话
    2008-03-03
  • JavaScript来实现打开链接页面的简单实例

    JavaScript来实现打开链接页面的简单实例

    下面小编就为大家带来一篇JavaScript来实现打开链接页面的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • js cookies实现简单统计访问次数

    js cookies实现简单统计访问次数

    js cookies实现简单统计访问次数的实现代码。主要是掌握js对cookies的操作。
    2009-11-11
  • 深入php面向对象、模式与实践

    深入php面向对象、模式与实践

    这篇文章主要介绍了深入php面向对象、模式与实践,需要的朋友可以参考下
    2016-02-02
  • js操作CheckBoxList实现全选/反选(在客服端完成)

    js操作CheckBoxList实现全选/反选(在客服端完成)

    对于CheckBoxList控件来说,一方面要实现大量数据在服务器端的绑定工作,另一方面往往要求实现全选、反选等功能,接下来将介绍js操作CheckBoxList实现全选/反选,感兴趣的朋友可以了解下,或许对你有所帮助
    2013-02-02
  • JS判断表单输入是否为空(示例代码)

    JS判断表单输入是否为空(示例代码)

    本篇文章主要是对JS判断表单输入是否为空的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • React中Ref 的使用方法详解

    React中Ref 的使用方法详解

    这篇文章主要介绍了React中Ref 的使用方法,结合实例形式总结分析了react中ref基本功能、用法及操作注意事项,需要的朋友可以参考下
    2020-04-04

最新评论