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>
运行
查看全文
相关阅读:
客户端性能优化
session、cookie、token的区别
java 动态代理模式(jdk和cglib)
java 静态代理模式
java ReentrantLock 公平锁 非公平锁 测试
java ReentrantLock结合条件队列 实现生产者-消费者模式 以及ReentratLock和Synchronized对比
VS2010 开发 VB6.0 activeX控件 dll
C++CLI语法 在项目中的使用
word 内容控件属性编辑
VC调用静态库、动态库
原文地址:https://www.cnblogs.com/heyinwangchuan/p/6136002.html
最新文章
python邮件发送封装类
python中正则随机值获取
charles抓取https包已加载证书还是不显示解决
详细讲解postman设置断言
微信公众平台做接口测试
5.31号的作业
python中的一些基础知识点
Oracle11g操作
Oracle11g创建表空间
离线状态下安装.net3.5
热门文章
Oracle11g数据库的备份及还原
在Python中,我们经常会遇到字符串的拼接问题,在这里我总结了四种字符串的拼接方式
git 命令
Charles抓包设置过滤,三种方式
Windows版 charles安装证书抓包网页HTTPS
单例模式以及Python实现
字符串去重排序
sort方法和sorted()函数
python反射机制
mongodb,redis,mysql的区别和具体应用场景
Copyright © 2011-2022 走看看