<style>*{margin:0;padding:0}#tinymask{position: absolute;top: 0;left: 0;height: 100%;width: 100%;z-index: 1500;background-color:#000;opacity:0;display:none;}#tinybox{display:none;background-color:#fff;padding:10px;z-index: 1600;}</style><script>var Class = {create: function() {return function() {this.initialize.apply(this, arguments);   }   }   }var extend = function(destination, source) {for (var property in source) {   destination[property] = source[property];   }return destination;   }var Popup = Class.create();//我们的富文本编辑器类Popup.prototype = {initialize:function(options){this.setOptions(options);this.createpup(options);   },setOptions:function(options){this.options = { //这里集中设置默认属性"opacity":30}extend(this.options, options || {});//这里是用来重写默认属性},ID:function(id){return document.getElementById(id) },//getElementById的快捷方式TN:function(tn){ return document.getElementsByTagName(tn) },//getElementsByTagName的快捷方式CE:function(s){ return document.createElement(s)},//createElement的快捷方式height:function(){return Math.max(document.documentElement.scrollHeight|| document.body.scrollHeight,document.documentElement.clientHeight|| document.body.clientHeight) ;   },cheight:function(){return document.documentElement.clientHeight|| document.body.clientHeight;   },width:function(){return Math.max(document.documentElement.scrollWidth|| document.body.scrollWidth,document.documentElement.clientWidth|| document.body.clientWidth) ;   },hide:function(t,op,end,speed){this.alpha(t,op,end,speed);   },show:function(t,op,end,speed){this.alpha(t,op,end,speed)   },alpha:function(t,op,end,speed) {$=this;var k=op;var b=end;if(end==0){   document.body.removeChild($.ID(‘tinybox‘));   }   t.si = setInterval(function () {if(op)   speed = Math.ceil(op /speed);elsespeed = Math.ceil(end /speed);//if(speed=0) speed=1;op = op +speed;   console.log(speed)if(k==0&&op>=end||(b==0&&op<=end)){   document.getElementById(‘tinymask‘).style.opacity = (op / 100);   console.log(end);if(end){   document.getElementById(‘tinymask‘).style.display="block";   document.getElementById(‘tinybox‘).style.display="block";   }else{   document.body.removeChild($.ID(‘tinymask‘));   }   clearInterval(t.si)   }   }, 20)   },resize:function(){var $ = this;$.ID(‘tinymask‘).style.width=$.width()+‘px‘;$.ID(‘tinymask‘).style.height=$.height()+‘px‘;   },popPosition:function(e){   e.style.position="absolute";   e.style.left=(this.width()/2- e.offsetWidth/2)+"px";   e.style.top=(this.cheight()/2- e.offsetHeight/2)+"px";   },createpup:function(t){var k=null;var pw,ph;var $ = this;var opacity= t.opacity;   console.log(opacity);var p=document.createElement(‘div‘); p.id=‘tinybox‘;var m=document.createElement(‘div‘); m.id=‘tinymask‘;var b=document.createElement(‘div‘); b.id=‘tinycontent‘;m.style.width=$.width()+"px";m.style.height=$.height()+"px";// m.style.opacity=opacity/100;   //m.style.filter=‘alpha(opacity:‘+opacity+‘)‘;b.innerHTML=t.content;   document.body.appendChild(m);   document.body.appendChild(p);$.show(p,0,opacity,5);p.appendChild(b);ph= t.Pheight?t.Pheight+"px":"";pw= t.Pwidth?t.Pwidth+"px":"";p.style.height=ph;p.style.width=pw;$.popPosition(p);m.onclick=function(){$.hide(p,opacity,0,-5);   }   window.onresize = function(){$.resize();$.popPosition(p);   }   }   }   window.onload = function(){   document.getElementById("btn").onclick=function(){new Popup({"opacity":50,"content":""});   }   }</script>111111

弹出层组件