zoukankan
html css js c++ java
弹出层组件
<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>
运行
查看全文
相关阅读:
test20181024 kun
test20181020 B君的第二题
test20181020 B君的第一题
test20181015 B 君的第三题
test20181018 B君的第三题
test20181019 B君的第三题
test20181021 快速排序
test20181019 B君的第一题
test20181018 B君的第一题
test20181016 B君的第三题
原文地址:https://www.cnblogs.com/heyinwangchuan/p/6136002.html
最新文章
【Docker】Dockerfile 最佳实践-EXPOSE
【Docker】Dockerfile 最佳实践-CMD
【Docker】Dockerfile 最佳实践-RUN
【Docker】Dockerfile 最佳实践-LABEL
【Docker】Dockerfile 最佳实践-FROM
【Docker】Dockerfile 最佳实践(二)
【Docker】Dockerfile 最佳实践(一)
【Docker】Docker 开发最佳实践
CSS---内外边距
CSS---文档流布局 | 脱标-postion-zindex | 脱标-浮动
热门文章
HTML---标签的分类 | display | visibility
TOJ-3474 The Big Dance(递归二分)
[USACO09DEC]牛收费路径Cow Toll Paths(floyd、加路径上最大点权值的最短路径)
扩展篇:Java中的常量池(字符串常量池、class常量池和运行时常量池)
Java Web【目录】
Java 集合:(三十) WeakHashMap实现类
ssh安全优化
test20181029 宝藏
test20181024 zi
test20181024 hao
Copyright © 2011-2022 走看看