弹出层组件

<style> *{margin:0;padding:0} #tinymask{ position: absolute; top: 0; left: 0; height: 100%; 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; }, 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); else speed = 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("btnc").onclick=function(){ new Popup({"opacity":50,"content":"<img src='http://images.cnblogs.com/cnblogs_com/heyinwangchuan/928444/o_u=467872920,427253626_fm=58.jpg'>"}); } } </script> <button id="btnc">运行</button> 运行