弹窗层效果的实现(非jQuery实现)

要想实现弹窗的效果,首先应该创建一个覆盖层maskLayer,以及一个显示层presentLayer。

其次,每次弹窗时(除首次弹窗外),maskLayer的显示以及隐藏不应该导致文档流的reflow,但是repaint不可避免。所以对于maskLayer,用以display:absolute;

最为关键的就是显示层的定位居中显示,根据maskLayer的高度和宽度计算出显示层的位置。

另外,为了多样性的支持弹窗的内容,该实现也提供了ajax抓取的相应功能,但具体并未测试,仓促做出的简单测试也并不完美。

为了节约空间大小,直接将该页面呈现。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        html,body{margin: 0;padding: 0;overflow: hidden;}
        #maskLayer{position: absolute;z-index: 1000;}
        #presentLayer{position: absolute;z-index: 1500;border: 10px solid #e3e3e3;background: url(img/preload.gif) center center no-repeat;}
    </style>
</head>
<body>
    <img id="test" src="http://image.zhangxinxu.com/image/study/s/mm10.jpg" width="200" height="200">
    <script>
        document.querySelector('#test').addEventListener('click',function(){
            var img = '<img src="http://image.zhangxinxu.com/image/study/s/mm10.jpg" width="640" height="466">'
            var clk = "<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' width='550' height='400'><param name='movie' value='img/as3_clock_2.swf' /><param name='quality' value='high' /><param name='wmode' value='opaque' /><embed height='400' width='550'  src='img/as3_clock_2.swf' type='application/x-shockwave-flash'></embed></object>";
            var con = '3s后即将关闭';
            Popup.u.show(clk,0,0,0,1);
        },false)
    </script>
    <script>
        (function(window){
            function get(id){
                return document.getElementById(id);
            }
            if(!window.Popup) var Popup = {};
            window.Popup = Popup;
            Popup.u = function(){
                var maskLayer,presentLayer,contentLayer,
                        scontent,sisAjax,swidth,sheight,sauto;
                var f = false
                return {
                    /**
                     * @param content
                     * @param isAjax
                     * @param width
                     * @param height
                     * @param auto  自适应宽度高度
                     * @param timeout
                     */
                    show: function(content,isAjax,width,height,auto,timeout){
                        var that = this;
                        if(!maskLayer){
                            maskLayer = document.createElement('div');
                            maskLayer.id = 'maskLayer'
                            presentLayer = document.createElement('div');
                            presentLayer.id = 'presentLayer';
                            presentLayer.style.position = 'absolute';
                            contentLayer = document.createElement('div');
                            contentLayer.id = 'contentLayer';
                            contentLayer.style.display = 'none';
                            maskLayer.style.position = 'absolute';
                            maskLayer.style.top = 0;
                            document.body.appendChild(maskLayer);
                            document.body.appendChild(presentLayer);
                            presentLayer.appendChild(contentLayer);

                            maskLayer.onclick = this.hide;
                            window.onresize = this.resize;
                        }
                        scontent = content;
                        sisAjax = isAjax;
                        swidth = width;
                        sheight = height;
                        sauto = auto;

                        this.spread();
                        this.preshow();
                        this.filter(maskLayer,80,3,1);
                        if (timeout)
                        setTimeout(that.hide,timeout * 1000);
                    },
                    load: function(content,isAjax,width,height,auto){
                        var that = this;
                        if(isAjax){
                            var xhr = that.ajax();
                            xhr.onreadystatechange = function(){
                                if(xhr.readyState == 4){
                                    if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
                                        that.process(xhr.responseText,width,height,auto);
                                    }
                                }
                            };
                            xhr.open('GET',content,true);
                            xhr.send(null);
                        }else{
                            that.process(content,width,height,auto);
                        }
                    },
                    hide: function(){
                        Popup.u.filter(presentLayer,0,5,-1);
                    },
                    process: function(content,width,height,auto){
                        if(auto){
                            if(!width && !height){
                                var preW = parseInt(presentLayer.style.width),
                                        preH = parseInt(presentLayer.style.height);
                                presentLayer.style.width = '';
                                presentLayer.style.height = '';
                                contentLayer.style.width = '';
                                contentLayer.style.height = '';
                                contentLayer.style.display = '';
                                presentLayer.style.backgroundImage = 'none';
                                contentLayer.innerHTML = content;

                            }else{
                                presentLayer.style.width = width;
                                presentLayer.style.height = height;
                            }
                            this.layout(preW,preH,width,height);
                        }
                    },
                    ajax: function(){
                        var that = this,fns;
                        fns = [function(){return new window.XMLHttpRequest();},function(){return new ActiveXObject('Msxml2.XMLHTTP')},
                        function(){return new ActiveXObject('Microsoft.XMLHTTP')}];
                            for(var i,len = fns.length;i<len;i++){
                                try{
                                    new fns[i]();
                                    that.ajax = fns[i];
                                    break;
                                }catch (e){}
                            }
                        return ajax();
                    },
                    resize: function(){
                        Popup.u.position();
                        Popup.u.spread();
                    },
                    // presentLayer 初始显示
                    preshow: function(bgimg){
                        var clientHeight = Popup.p.clientHeight(),clientWidth = Popup.p.clientWidth(),
                                setTop,setLeft;
                        bgimg = bgimg?bgimg:'';
                        presentLayer.style.display = 'none';
                        presentLayer.style.backgroundColor = '#fff';
                        presentLayer.style.backgroundImage = bgimg;
                        presentLayer.style.width = '100px';
                        presentLayer.style.height = '100px';
                        setTop = (clientHeight - 100) / 2;
                        setLeft = (clientWidth - 100) /2;
                        setTop = setTop < 20 ? 20 : setTop;
                        presentLayer.style.left = setLeft + 'px';
                        presentLayer.style.top = setTop + 'px';
                        presentLayer.style.display = '';
                        return;
                    },
                    /**
                     * @param bgimg
                     * 遮盖层展开,设置height width
                    **/
                    spread: function(bgimg){
                        bgimg = bgimg?bgimg:'';
                        maskLayer.style.backgroundColor = '#303030';
                        maskLayer.style.backgroundImage = bgimg;
                        maskLayer.style.width = Popup.p.pageWidth() + 'px';
                        maskLayer.style.height = Popup.p.pageHeight() + 'px';
                        return;
                    },
                    // 定位 presentLayer
                    position: function(){
                        var clientHeight = Popup.p.clientHeight(),
                                clientWidth = Popup.p.clientWidth(),
                                boxW,boxH,setLeft,setTop;
                        boxH = presentLayer.offsetHeight;
                        boxW = presentLayer.offsetWidth;
                        setTop = Math.abs(clientHeight - boxH) / 2;  console.log(setTop)
                        setLeft = Math.abs(clientWidth - boxW) /2;
                        setTop = setTop < 20 ? 20 : setTop;
                        presentLayer.style.left = setLeft + 'px';
                        presentLayer.style.top = setTop + 'px';
                        return ;
                    },
                    layout: function(preW,preH,width,height){  // 设定presentLayer 和 contentLayer的位置关系
                        var padding,margin,
                                finW,finH,
                                that = this,
                                factorW,factorH,
                                curW = preW,curH = preH,
                                timeid;
                        /*console.log('presentLayer:'+presentLayer.offsetWidth+" "+presentLayer.offsetHeight)
                        console.log('contentLayer:'+contentLayer.offsetWidth+" "+contentLayer.offsetHeight)
                        */
                        if(!width && !height){
                            finW = contentLayer.offsetWidth;
                            finH = contentLayer.offsetHeight;
                        }else{
                            finW = width;
                            finH = height;
                        }

                        factorW = finW > preW ? 1 : -1;
                        factorH = finH > preH ? 1 : -1;
                        presentLayer.style.paddingBottom = '10px';
                        presentLayer.style.paddingTop = '10px';
                        presentLayer.style.paddingLeft = '10px';
                        presentLayer.style.paddingRight = '10px';
                        contentLayer.style.display = '';

                        function recurse(){
                            if(curW == finW){
                                if(curH == finH){
                                    clearInterval(timeid);
                                    that.position();
                                    contentLayer.style.display = '';
                                    return;
                                }
                            }else{
                                curW += Math.ceil(Math.abs(finW - curW) / 3) * factorW;
                                presentLayer.style.width = curW + 'px';
                            }

                            if(curH == finH){
                                if(curW == finW){
                                    clearInterval(timeid);
                                    that.position();
                                    contentLayer.style.display = '';
                                    return;
                                }
                            }else{
                                curH += Math.ceil(Math.abs(finH - curH) / 3) * factorH;
                                presentLayer.style.height = curH + 'px';
                            }
                            that.position();
                        }
                        timeid = setInterval(recurse,20);
                    },
                    /**
                     * @param el
                     * @param opacity
                     * @param factor  每次迭代所增减的因子
                     * @param iod 增减性,取值为正负1.  -1 则意味着透明度逐渐为零
                     */
                    filter: function(el,opacity,factor,iod){
                        if(el.uuid){
                            clearInterval(el.uuid);
                        }

                        var curVal = 0,that = this;
                        if(iod == -1){
                            curVal = el.style.opacity * 100;
                        }else{
                            el.style.opacity = 0;
                            el.style.filter = 'alpha(opacity=0)';
                        }

                        function recurse(){
                            if(curVal == opacity){
                                clearInterval(el.uuid);
                                el.uuid = null;
                                if(iod == 1){ // 先显示maskLayer,然后显示presentLayer
                                    el.style.display = '';
                                    el === maskLayer ? that.filter(presentLayer,100,5,1) : that.load(scontent,sisAjax,swidth,sheight,sauto);
                                }else{  // 先隐藏presentLayer
                                    el.style.display = 'none';
                                    if(el === presentLayer){
                                        el.style.width = el.style.height = 0;
                                    }
                                    el === presentLayer ? that.filter(maskLayer,0,3,-1):contentLayer.innerHTML = '';
                                }
                            }else{
                                curVal += Math.ceil(Math.abs(opacity - curVal) / factor) * iod;
                                el.style.opacity = curVal / 100;
                                el.style.filter = 'alpha(opacity=' + curVal + ')';
                            }
                        }
                        el.uuid = setInterval(recurse,20);
                    }
                };

            }();

            Popup.p = function(){
                var h = document.documentElement,b = document.body;
                return {
                    pageWidth: function(){return Math.max(Math.max(h.scrollWidth, b.scrollWidth),Math.max(h.offsetWidth, b.offsetWidth))},
                    pageHeight: function(){return Math.max(Math.max(h.scrollHeight, b.scrollHeight),Math.max(h.offsetHeight, b.offsetHeight))},
                    clientWidth: function(){return window.innerWidth || h.clientWidth || b.clientWidth},
                    clientHeight: function(){return window.innerHeight || h.clientHeight || b.clientHeight}
                }
            }();
        })(window);

    </script>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏非典型技术宅

UIScrollView的一步步实现1 简介1.1 工作原理1.2 UIScrollView常见的几个重要控件1.3 UIScrollView常见的重要属性1.4 手工代码实现拖动2 三个重要属性的进

1206
来自专栏一“技”之长

iOS开发UINavigation系列三——工具栏UIToolBar

        iOS中除了UINavinationBar之外,还有工具栏UIToolBar可以供我们使用,工具栏和导航栏十分类似,只是功能更加简单,工具栏中也...

711
来自专栏偏前端工程师的驿站

CSS3魔法堂:CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解

一、前言                                  IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后...

24410
来自专栏進无尽的文章

绘图- 镂空效果及其动画实现解析

有时你会看到很多镂空的试图或者是镂空视图的动画效果,感觉很酷炫,其实只要掌握其中实现的原理,想实现怎样的效果就能实现怎样的镂空效果。

1812
来自专栏HTML5学堂

随心所欲的滚动条,远离产品汪(二)

还记得上周咱们说的“随心所欲滚动条,远离产品汪”一文吗?当中介绍了自定义滚动条的基本原理与实现方法,在自定义滚动条实现后,可以通过对滚动条的上下拖动来控制内容区...

3738
来自专栏HTML5学堂

谁说不能用代码实现酷炫的文字特效?

HTML5学堂:文本阴影是一个很神奇的属性,在它还没有出现之前,网页中对于阴影的制作一般都是采用Photoshop做成图片来实现的。而在CSS3流行的当下,我们...

3903
来自专栏Charlie's Road

视觉效果 -- iOS Core Animation 系列三

本片文章前三章内容大家比较常用,后面的可能会不那么常用,前面的基础内容不想看了可以直接从第4段开始

1363
来自专栏一“技”之长

iOS UISlider用法总结 原

UIslider滑块控件在IOS开发中会常用到,可用于调节音量,字体大小等UI方面的交互,用法总结如下:

752
来自专栏章鱼的慢慢技术路

MFC绘图小实验(2)

1883
来自专栏雨尘分享

iOS 动画基础总结篇

2315

扫码关注云+社区