弹出层组件

<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);
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>

posted @ 2016-12-05 23:42 莺哥阅读(281) 评论(0) 收藏举报

刷新页面返回顶部