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

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

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

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

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         html,body{margin: 0;padding: 0;overflow: hidden;}
  8.         #maskLayer{position: absolute;z-index: 1000;}
  9.         #presentLayer{position: absolute;z-index: 1500;border: 10px solid #e3e3e3;background: url(img/preload.gif) center center no-repeat;}
  10.     </style>
  11. </head>
  12. <body>
  13.     <img id="test" src="http://image.zhangxinxu.com/image/study/s/mm10.jpg" width="200" height="200">
  14.     <script>
  15.         document.querySelector('#test').addEventListener('click',function(){
  16.             var img = '<img src="http://image.zhangxinxu.com/image/study/s/mm10.jpg" width="640" height="466">'
  17.             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>";
  18.             var con = '3s后即将关闭';
  19.             Popup.u.show(clk,0,0,0,1);
  20.         },false)
  21.     </script>
  22.     <script>
  23.         (function(window){
  24.             function get(id){
  25.                 return document.getElementById(id);
  26.             }
  27.             if(!window.Popup) var Popup = {};
  28.             window.Popup = Popup;
  29.             Popup.u = function(){
  30.                 var maskLayer,presentLayer,contentLayer,
  31.                         scontent,sisAjax,swidth,sheight,sauto;
  32.                 var f = false
  33.                 return {
  34.                     /**
  35.                      * @param content
  36.                      * @param isAjax
  37.                      * @param width
  38.                      * @param height
  39.                      * @param auto  自适应宽度高度
  40.                      * @param timeout
  41.                      */
  42.                     show: function(content,isAjax,width,height,auto,timeout){
  43.                         var that = this;
  44.                         if(!maskLayer){
  45.                             maskLayer = document.createElement('div');
  46.                             maskLayer.id = 'maskLayer'
  47.                             presentLayer = document.createElement('div');
  48.                             presentLayer.id = 'presentLayer';
  49.                             presentLayer.style.position = 'absolute';
  50.                             contentLayer = document.createElement('div');
  51.                             contentLayer.id = 'contentLayer';
  52.                             contentLayer.style.display = 'none';
  53.                             maskLayer.style.position = 'absolute';
  54.                             maskLayer.style.top = 0;
  55.                             document.body.appendChild(maskLayer);
  56.                             document.body.appendChild(presentLayer);
  57.                             presentLayer.appendChild(contentLayer);
  58.  
  59.                             maskLayer.onclick = this.hide;
  60.                             window.onresize = this.resize;
  61.                         }
  62.                         scontent = content;
  63.                         sisAjax = isAjax;
  64.                         swidth = width;
  65.                         sheight = height;
  66.                         sauto = auto;
  67.  
  68.                         this.spread();
  69.                         this.preshow();
  70.                         this.filter(maskLayer,80,3,1);
  71.                         if (timeout)
  72.                         setTimeout(that.hide,timeout * 1000);
  73.                     },
  74.                     load: function(content,isAjax,width,height,auto){
  75.                         var that = this;
  76.                         if(isAjax){
  77.                             var xhr = that.ajax();
  78.                             xhr.onreadystatechange = function(){
  79.                                 if(xhr.readyState == 4){
  80.                                     if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
  81.                                         that.process(xhr.responseText,width,height,auto);
  82.                                     }
  83.                                 }
  84.                             };
  85.                             xhr.open('GET',content,true);
  86.                             xhr.send(null);
  87.                         }else{
  88.                             that.process(content,width,height,auto);
  89.                         }
  90.                     },
  91.                     hide: function(){
  92.                         Popup.u.filter(presentLayer,0,5,-1);
  93.                     },
  94.                     process: function(content,width,height,auto){
  95.                         if(auto){
  96.                             if(!width && !height){
  97.                                 var preW = parseInt(presentLayer.style.width),
  98.                                         preH = parseInt(presentLayer.style.height);
  99.                                 presentLayer.style.width = '';
  100.                                 presentLayer.style.height = '';
  101.                                 contentLayer.style.width = '';
  102.                                 contentLayer.style.height = '';
  103.                                 contentLayer.style.display = '';
  104.                                 presentLayer.style.backgroundImage = 'none';
  105.                                 contentLayer.innerHTML = content;
  106.  
  107.                             }else{
  108.                                 presentLayer.style.width = width;
  109.                                 presentLayer.style.height = height;
  110.                             }
  111.                             this.layout(preW,preH,width,height);
  112.                         }
  113.                     },
  114.                     ajax: function(){
  115.                         var that = this,fns;
  116.                         fns = [function(){return new window.XMLHttpRequest();},function(){return new ActiveXObject('Msxml2.XMLHTTP')},
  117.                         function(){return new ActiveXObject('Microsoft.XMLHTTP')}];
  118.                             for(var i,len = fns.length;i<len;i++){
  119.                                 try{
  120.                                     new fns[i]();
  121.                                     that.ajax = fns[i];
  122.                                     break;
  123.                                 }catch (e){}
  124.                             }
  125.                         return ajax();
  126.                     },
  127.                     resize: function(){
  128.                         Popup.u.position();
  129.                         Popup.u.spread();
  130.                     },
  131.                     // presentLayer 初始显示
  132.                     preshow: function(bgimg){
  133.                         var clientHeight = Popup.p.clientHeight(),clientWidth = Popup.p.clientWidth(),
  134.                                 setTop,setLeft;
  135.                         bgimg = bgimg?bgimg:'';
  136.                         presentLayer.style.display = 'none';
  137.                         presentLayer.style.backgroundColor = '#fff';
  138.                         presentLayer.style.backgroundImage = bgimg;
  139.                         presentLayer.style.width = '100px';
  140.                         presentLayer.style.height = '100px';
  141.                         setTop = (clientHeight - 100) / 2;
  142.                         setLeft = (clientWidth - 100) /2;
  143.                         setTop = setTop < 20 ? 20 : setTop;
  144.                         presentLayer.style.left = setLeft + 'px';
  145.                         presentLayer.style.top = setTop + 'px';
  146.                         presentLayer.style.display = '';
  147.                         return;
  148.                     },
  149.                     /**
  150.                      * @param bgimg
  151.                      * 遮盖层展开，设置height width
  152.                     **/
  153.                     spread: function(bgimg){
  154.                         bgimg = bgimg?bgimg:'';
  155.                         maskLayer.style.backgroundColor = '#303030';
  156.                         maskLayer.style.backgroundImage = bgimg;
  157.                         maskLayer.style.width = Popup.p.pageWidth() + 'px';
  158.                         maskLayer.style.height = Popup.p.pageHeight() + 'px';
  159.                         return;
  160.                     },
  161.                     // 定位 presentLayer
  162.                     position: function(){
  163.                         var clientHeight = Popup.p.clientHeight(),
  164.                                 clientWidth = Popup.p.clientWidth(),
  165.                                 boxW,boxH,setLeft,setTop;
  166.                         boxH = presentLayer.offsetHeight;
  167.                         boxW = presentLayer.offsetWidth;
  168.                         setTop = Math.abs(clientHeight - boxH) / 2;  console.log(setTop)
  169.                         setLeft = Math.abs(clientWidth - boxW) /2;
  170.                         setTop = setTop < 20 ? 20 : setTop;
  171.                         presentLayer.style.left = setLeft + 'px';
  172.                         presentLayer.style.top = setTop + 'px';
  173.                         return ;
  174.                     },
  175.                     layout: function(preW,preH,width,height){  // 设定presentLayer 和 contentLayer的位置关系
  176.                         var padding,margin,
  177.                                 finW,finH,
  178.                                 that = this,
  179.                                 factorW,factorH,
  180.                                 curW = preW,curH = preH,
  181.                                 timeid;
  182.                         /*console.log('presentLayer:'+presentLayer.offsetWidth+" "+presentLayer.offsetHeight)
  183.                         console.log('contentLayer:'+contentLayer.offsetWidth+" "+contentLayer.offsetHeight)
  184.                         */
  185.                         if(!width && !height){
  186.                             finW = contentLayer.offsetWidth;
  187.                             finH = contentLayer.offsetHeight;
  188.                         }else{
  189.                             finW = width;
  190.                             finH = height;
  191.                         }
  192.  
  193.                         factorW = finW > preW ? 1 : -1;
  194.                         factorH = finH > preH ? 1 : -1;
  195.                         presentLayer.style.paddingBottom = '10px';
  196.                         presentLayer.style.paddingTop = '10px';
  197.                         presentLayer.style.paddingLeft = '10px';
  198.                         presentLayer.style.paddingRight = '10px';
  199.                         contentLayer.style.display = '';
  200.  
  201.                         function recurse(){
  202.                             if(curW == finW){
  203.                                 if(curH == finH){
  204.                                     clearInterval(timeid);
  205.                                     that.position();
  206.                                     contentLayer.style.display = '';
  207.                                     return;
  208.                                 }
  209.                             }else{
  210.                                 curW += Math.ceil(Math.abs(finW - curW) / 3) * factorW;
  211.                                 presentLayer.style.width = curW + 'px';
  212.                             }
  213.  
  214.                             if(curH == finH){
  215.                                 if(curW == finW){
  216.                                     clearInterval(timeid);
  217.                                     that.position();
  218.                                     contentLayer.style.display = '';
  219.                                     return;
  220.                                 }
  221.                             }else{
  222.                                 curH += Math.ceil(Math.abs(finH - curH) / 3) * factorH;
  223.                                 presentLayer.style.height = curH + 'px';
  224.                             }
  225.                             that.position();
  226.                         }
  227.                         timeid = setInterval(recurse,20);
  228.                     },
  229.                     /**
  230.                      * @param el
  231.                      * @param opacity
  232.                      * @param factor  每次迭代所增减的因子
  233.                      * @param iod 增减性，取值为正负1.  -1 则意味着透明度逐渐为零
  234.                      */
  235.                     filter: function(el,opacity,factor,iod){
  236.                         if(el.uuid){
  237.                             clearInterval(el.uuid);
  238.                         }
  239.  
  240.                         var curVal = 0,that = this;
  241.                         if(iod == -1){
  242.                             curVal = el.style.opacity * 100;
  243.                         }else{
  244.                             el.style.opacity = 0;
  245.                             el.style.filter = 'alpha(opacity=0)';
  246.                         }
  247.  
  248.                         function recurse(){
  249.                             if(curVal == opacity){
  250.                                 clearInterval(el.uuid);
  251.                                 el.uuid = null;
  252.                                 if(iod == 1){ // 先显示maskLayer，然后显示presentLayer
  253.                                     el.style.display = '';
  254.                                     el === maskLayer ? that.filter(presentLayer,100,5,1) : that.load(scontent,sisAjax,swidth,sheight,sauto);
  255.                                 }else{  // 先隐藏presentLayer
  256.                                     el.style.display = 'none';
  257.                                     if(el === presentLayer){
  258.                                         el.style.width = el.style.height = 0;
  259.                                     }
  260.                                     el === presentLayer ? that.filter(maskLayer,0,3,-1):contentLayer.innerHTML = '';
  261.                                 }
  262.                             }else{
  263.                                 curVal += Math.ceil(Math.abs(opacity - curVal) / factor) * iod;
  264.                                 el.style.opacity = curVal / 100;
  265.                                 el.style.filter = 'alpha(opacity=' + curVal + ')';
  266.                             }
  267.                         }
  268.                         el.uuid = setInterval(recurse,20);
  269.                     }
  270.                 };
  271.  
  272.             }();
  273.  
  274.             Popup.p = function(){
  275.                 var h = document.documentElement,b = document.body;
  276.                 return {
  277.                     pageWidth: function(){return Math.max(Math.max(h.scrollWidth, b.scrollWidth),Math.max(h.offsetWidth, b.offsetWidth))},
  278.                     pageHeight: function(){return Math.max(Math.max(h.scrollHeight, b.scrollHeight),Math.max(h.offsetHeight, b.offsetHeight))},
  279.                     clientWidth: function(){return window.innerWidth || h.clientWidth || b.clientWidth},
  280.                     clientHeight: function(){return window.innerHeight || h.clientHeight || b.clientHeight}
  281.                 }
  282.             }();
  283.         })(window);
  284.  
  285.     </script>
  286. </body>
  287. </html>

弹窗层效果的实现（非jQuery实现）的更多相关文章

  1. [转]jquery Fancybox丰富的弹出层效果

    本文转自:http://www.helloweba.com/view-blog-65.html Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果.前面我们有文章介绍了facyb ...

  2. jQuery WIN 7透明弹出层效果

    jQuery WIN 7透明弹出层效果,点击可以弹出一个透明层的jquery特效,插件可以调弹出框的宽度和高度,很不错的一个弹出层插件. 适用浏览器:IE8.360.FireFox.Chrome.Sa ...

  3. jQuery弹出层效果

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta ...

  4. Fancybox丰富的弹出层效果

    Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果.前面我们有文章介绍了facybox弹出层效果,相比facybox,fancybox显得功能更为齐全,它除了可以加载DIV,图片 ...

  5. 纯CSS3写的10个不同的酷炫图片遮罩层效果【转】

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...

  6. 纯CSS3写的10个不同的酷炫图片遮罩层效果

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  7. 15款效果很酷的最新jQuery/CSS3特效

    很久没来博客园发表文章了,今天就分享15款效果很酷的最新jQuery/CSS3特效,废话不说,一起来看看吧. 1.3D图片上下翻牌切换 一款基于jQuery+CSS3实现的3D图片上下翻牌切换效果,支 ...

  8. js+css实现模态层效果

    在做web前端的时候,有些时候会涉及到模态层,在此提供一种实现思路.希望对大家实用.先贴效果吧: 模态层效果 以下说说在写模态层的时候的思路:通过可配置的參数width,height,title以及c ...

  9. 利用div实现遮罩层效果

    利用div实现遮罩层效果就是利用一个全屏.半透明的div遮住页面上其它元素,典型的例子就是百度的登录界面.下面贴出示例代码: <!DOCTYPE html> <html> &l ...

随机推荐

  1. 关于C#的微信开发的入门记录二

    在准备了空间和域名之后,现在来讲讲我们接下来的编码过程: 今天就先到这里了!没有服务器那些的请看我之前的博客:http://www.cnblogs.com/zhankui/p/4515905.html ...

  2. hdu 2037简单贪心--活动安排问题

    活动安排问题就是要在所给的活动集合中选出最大的相容活动子集合,是可以用贪心算法有效求解的很好例子.该问题要求高效地安排一系列争用某一公共资源的活动.贪心算法提供了一个简单.漂亮的方法使得尽可能多的活动 ...

  3. Centos 7 安装 设置 IP地址,DNS,主机名,防火墙,端口,SELinux (实测+笔记)

    环境: 系统硬件:vmware vsphere (CPU:2*4核,内存2G,双网卡) 系统版本:CentOS-7.0-1406-x86_64-DVD.iso 安装步骤: 1.虚拟系统安装 1.1 使 ...

  4. angular input标签只能单向传递数据的问题

    angularjs input标签只能单向传递数据的问题 <ion-view title = "{{roomName}}" style = "height:90%; ...

  5. MyBatis的经典案例

    1.首先我们先了解Mybatis的一些jar包 ---和项目框架 2.接下来就看看mybatis的配置文件(mybatis-config.xml) <?xml version="1.0 ...

  6. laravel中TokenMismatchException异常处理

    在使用post或者put等方法请求时,有时会报TokenMismatchException in VerifyCsrfToken.php line 67错误.原因是laravel默认开启了防CSRF. ...

  7. JavaScript资源大全中文版（Awesome最新版--转载自张果老师博客）

    JavaScript资源大全中文版(Awesome最新版)   目录 前端MVC 框架和库 包管理器 加载器 打包工具 测试框架 框架 断言 覆盖率 运行器 QA 工具 基于 Node 的 CMS 框 ...

  8. Unity_UGUI知识点思维导图

    转自 http://blog.csdn.net/qq_34134078/article/details/51772568 个人总结的UGUI学习知识要点思维导图,四张部分图及最后一张整体图 1.UI基 ...

  9. C语言的傻瓜式随笔（一）：嵌套循环－程序结构

    循环语句的嵌套 一个循环结构内可以含有另一个循环,称为循环嵌套,又称多重循环.常用的循环嵌套是二重循环,外层循环称为外循环,内层循环称为内循环. ---------不知道哪来的基础概念 这是本宝宝的第 ...

  10. easyUI datagrid 根据查询条件 选中对应数据的行

    开始 输入了 土豆,南瓜,再次是小青菜,每次输入点击搜索的时候(模糊查询),选中的当前数据对应的行 在做之前,在网上查询了许多资料,也在技术群里问过许多次,弄了好久终于好了. 第一次写博客真不知道写啥 ...