弹窗层效果的实现（非jQuery实现）
要想实现弹窗的效果，首先应该创建一个覆盖层maskLayer，以及一个显示层presentLayer。
其次，每次弹窗时（除首次弹窗外），maskLayer的显示以及隐藏不应该导致文档流的reflow，但是repaint不可避免。所以对于maskLayer，用以display:absolute;
最为关键的就是显示层的定位居中显示，根据maskLayer的高度和宽度计算出显示层的位置。
另外，为了多样性的支持弹窗的内容，该实现也提供了ajax抓取的相应功能，但具体并未测试，仓促做出的简单测试也并不完美。
为了节约空间大小，直接将该页面呈现。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
html,body{margin: 0;padding: 0;overflow: hidden;}
#maskLayer{position: absolute;z-index: 1000;}
#presentLayer{position: absolute;z-index: 1500;border: 10px solid #e3e3e3;background: url(img/preload.gif) center center no-repeat;}
</style>
</head>
<body>
<img id="test" src="http://image.zhangxinxu.com/image/study/s/mm10.jpg" width="200" height="200">
<script>
document.querySelector('#test').addEventListener('click',function(){
var img = '<img src="http://image.zhangxinxu.com/image/study/s/mm10.jpg" width="640" height="466">'
var clk = "<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' width='550' height='400'><param name='movie' value='img/as3_clock_2.swf' /><param name='quality' value='high' /><param name='wmode' value='opaque' /><embed height='400' width='550' src='img/as3_clock_2.swf' type='application/x-shockwave-flash'></embed></object>";
var con = '3s后即将关闭';
Popup.u.show(clk,0,0,0,1);
},false)
</script>
<script>
(function(window){
function get(id){
return document.getElementById(id);
}
if(!window.Popup) var Popup = {};
window.Popup = Popup;
Popup.u = function(){
var maskLayer,presentLayer,contentLayer,
scontent,sisAjax,swidth,sheight,sauto;
var f = false
return {
/**
* @param content
* @param isAjax
* @param width
* @param height
* @param auto 自适应宽度高度
* @param timeout
*/
show: function(content,isAjax,width,height,auto,timeout){
var that = this;
if(!maskLayer){
maskLayer = document.createElement('div');
maskLayer.id = 'maskLayer'
presentLayer = document.createElement('div');
presentLayer.id = 'presentLayer';
presentLayer.style.position = 'absolute';
contentLayer = document.createElement('div');
contentLayer.id = 'contentLayer';
contentLayer.style.display = 'none';
maskLayer.style.position = 'absolute';
maskLayer.style.top = 0;
document.body.appendChild(maskLayer);
document.body.appendChild(presentLayer);
presentLayer.appendChild(contentLayer); maskLayer.onclick = this.hide;
window.onresize = this.resize;
}
scontent = content;
sisAjax = isAjax;
swidth = width;
sheight = height;
sauto = auto; this.spread();
this.preshow();
this.filter(maskLayer,80,3,1);
if (timeout)
setTimeout(that.hide,timeout * 1000);
},
load: function(content,isAjax,width,height,auto){
var that = this;
if(isAjax){
var xhr = that.ajax();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
that.process(xhr.responseText,width,height,auto);
}
}
};
xhr.open('GET',content,true);
xhr.send(null);
}else{
that.process(content,width,height,auto);
}
},
hide: function(){
Popup.u.filter(presentLayer,0,5,-1);
},
process: function(content,width,height,auto){
if(auto){
if(!width && !height){
var preW = parseInt(presentLayer.style.width),
preH = parseInt(presentLayer.style.height);
presentLayer.style.width = '';
presentLayer.style.height = '';
contentLayer.style.width = '';
contentLayer.style.height = '';
contentLayer.style.display = '';
presentLayer.style.backgroundImage = 'none';
contentLayer.innerHTML = content; }else{
presentLayer.style.width = width;
presentLayer.style.height = height;
}
this.layout(preW,preH,width,height);
}
},
ajax: function(){
var that = this,fns;
fns = [function(){return new window.XMLHttpRequest();},function(){return new ActiveXObject('Msxml2.XMLHTTP')},
function(){return new ActiveXObject('Microsoft.XMLHTTP')}];
for(var i,len = fns.length;i<len;i++){
try{
new fns[i]();
that.ajax = fns[i];
break;
}catch (e){}
}
return ajax();
},
resize: function(){
Popup.u.position();
Popup.u.spread();
},
// presentLayer 初始显示
preshow: function(bgimg){
var clientHeight = Popup.p.clientHeight(),clientWidth = Popup.p.clientWidth(),
setTop,setLeft;
bgimg = bgimg?bgimg:'';
presentLayer.style.display = 'none';
presentLayer.style.backgroundColor = '#fff';
presentLayer.style.backgroundImage = bgimg;
presentLayer.style.width = '100px';
presentLayer.style.height = '100px';
setTop = (clientHeight - 100) / 2;
setLeft = (clientWidth - 100) /2;
setTop = setTop < 20 ? 20 : setTop;
presentLayer.style.left = setLeft + 'px';
presentLayer.style.top = setTop + 'px';
presentLayer.style.display = '';
return;
},
/**
* @param bgimg
* 遮盖层展开，设置height width
**/
spread: function(bgimg){
bgimg = bgimg?bgimg:'';
maskLayer.style.backgroundColor = '#303030';
maskLayer.style.backgroundImage = bgimg;
maskLayer.style.width = Popup.p.pageWidth() + 'px';
maskLayer.style.height = Popup.p.pageHeight() + 'px';
return;
},
// 定位 presentLayer
position: function(){
var clientHeight = Popup.p.clientHeight(),
clientWidth = Popup.p.clientWidth(),
boxW,boxH,setLeft,setTop;
boxH = presentLayer.offsetHeight;
boxW = presentLayer.offsetWidth;
setTop = Math.abs(clientHeight - boxH) / 2; console.log(setTop)
setLeft = Math.abs(clientWidth - boxW) /2;
setTop = setTop < 20 ? 20 : setTop;
presentLayer.style.left = setLeft + 'px';
presentLayer.style.top = setTop + 'px';
return ;
},
layout: function(preW,preH,width,height){ // 设定presentLayer 和 contentLayer的位置关系
var padding,margin,
finW,finH,
that = this,
factorW,factorH,
curW = preW,curH = preH,
timeid;
/*console.log('presentLayer:'+presentLayer.offsetWidth+" "+presentLayer.offsetHeight)
console.log('contentLayer:'+contentLayer.offsetWidth+" "+contentLayer.offsetHeight)
*/
if(!width && !height){
finW = contentLayer.offsetWidth;
finH = contentLayer.offsetHeight;
}else{
finW = width;
finH = height;
} factorW = finW > preW ? 1 : -1;
factorH = finH > preH ? 1 : -1;
presentLayer.style.paddingBottom = '10px';
presentLayer.style.paddingTop = '10px';
presentLayer.style.paddingLeft = '10px';
presentLayer.style.paddingRight = '10px';
contentLayer.style.display = ''; function recurse(){
if(curW == finW){
if(curH == finH){
clearInterval(timeid);
that.position();
contentLayer.style.display = '';
return;
}
}else{
curW += Math.ceil(Math.abs(finW - curW) / 3) * factorW;
presentLayer.style.width = curW + 'px';
} if(curH == finH){
if(curW == finW){
clearInterval(timeid);
that.position();
contentLayer.style.display = '';
return;
}
}else{
curH += Math.ceil(Math.abs(finH - curH) / 3) * factorH;
presentLayer.style.height = curH + 'px';
}
that.position();
}
timeid = setInterval(recurse,20);
},
/**
* @param el
* @param opacity
* @param factor 每次迭代所增减的因子
* @param iod 增减性，取值为正负1. -1 则意味着透明度逐渐为零
*/
filter: function(el,opacity,factor,iod){
if(el.uuid){
clearInterval(el.uuid);
} var curVal = 0,that = this;
if(iod == -1){
curVal = el.style.opacity * 100;
}else{
el.style.opacity = 0;
el.style.filter = 'alpha(opacity=0)';
} function recurse(){
if(curVal == opacity){
clearInterval(el.uuid);
el.uuid = null;
if(iod == 1){ // 先显示maskLayer，然后显示presentLayer
el.style.display = '';
el === maskLayer ? that.filter(presentLayer,100,5,1) : that.load(scontent,sisAjax,swidth,sheight,sauto);
}else{ // 先隐藏presentLayer
el.style.display = 'none';
if(el === presentLayer){
el.style.width = el.style.height = 0;
}
el === presentLayer ? that.filter(maskLayer,0,3,-1):contentLayer.innerHTML = '';
}
}else{
curVal += Math.ceil(Math.abs(opacity - curVal) / factor) * iod;
el.style.opacity = curVal / 100;
el.style.filter = 'alpha(opacity=' + curVal + ')';
}
}
el.uuid = setInterval(recurse,20);
}
}; }(); Popup.p = function(){
var h = document.documentElement,b = document.body;
return {
pageWidth: function(){return Math.max(Math.max(h.scrollWidth, b.scrollWidth),Math.max(h.offsetWidth, b.offsetWidth))},
pageHeight: function(){return Math.max(Math.max(h.scrollHeight, b.scrollHeight),Math.max(h.offsetHeight, b.offsetHeight))},
clientWidth: function(){return window.innerWidth || h.clientWidth || b.clientWidth},
clientHeight: function(){return window.innerHeight || h.clientHeight || b.clientHeight}
}
}();
})(window); </script>
</body>
</html>
弹窗层效果的实现（非jQuery实现）的更多相关文章
- [转]jquery Fancybox丰富的弹出层效果
本文转自:http://www.helloweba.com/view-blog-65.html Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果.前面我们有文章介绍了facyb ...
- jQuery WIN 7透明弹出层效果
jQuery WIN 7透明弹出层效果,点击可以弹出一个透明层的jquery特效,插件可以调弹出框的宽度和高度,很不错的一个弹出层插件. 适用浏览器:IE8.360.FireFox.Chrome.Sa ...
- jQuery弹出层效果
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta ...
- Fancybox丰富的弹出层效果
Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果.前面我们有文章介绍了facybox弹出层效果,相比facybox,fancybox显得功能更为齐全,它除了可以加载DIV,图片 ...
- 纯CSS3写的10个不同的酷炫图片遮罩层效果【转】
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...
- 纯CSS3写的10个不同的酷炫图片遮罩层效果
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- 15款效果很酷的最新jQuery/CSS3特效
很久没来博客园发表文章了,今天就分享15款效果很酷的最新jQuery/CSS3特效,废话不说,一起来看看吧. 1.3D图片上下翻牌切换 一款基于jQuery+CSS3实现的3D图片上下翻牌切换效果,支 ...
- js+css实现模态层效果
在做web前端的时候,有些时候会涉及到模态层,在此提供一种实现思路.希望对大家实用.先贴效果吧: 模态层效果 以下说说在写模态层的时候的思路:通过可配置的參数width,height,title以及c ...
- 利用div实现遮罩层效果
利用div实现遮罩层效果就是利用一个全屏.半透明的div遮住页面上其它元素,典型的例子就是百度的登录界面.下面贴出示例代码: <!DOCTYPE html> <html> &l ...
随机推荐
- Odoo 报表中添加空格
如果 不起作用,请用 代替.
- 浏览器地址栏输入一个URL后回车，将会发生的事情
浏览器向DNS服务器查找输入URL对应的IP地址. DNS服务器返回网站的IP地址. 浏览器根据IP地址与目标web服务器在80端口上建立TCP连接 浏览器获取请求页面的html代码. 浏览器在显示窗 ...
- 公司培训 oracle（ 第一天）
以前在学校学习Oracle的时候就对rowid 和rownum 这两个伪列有很大的疑惑,今天公司对16届新员工进行公司内部技术培训,课堂上的讲解,又让我想起来了曾经的疑惑点, 我想不能在让这个疑惑继续 ...
- console对象-转
console对象 来自<JavaScript 标准参考教程(alpha)>,by 阮一峰 目录 开发者工具 console对象 console.log() console.debug() ...
- C语言中的栈和堆
原文出处<http://blog.csdn.net/xiayufeng520/article/details/45956305#t0> 栈内存由编译器分配和释放,堆内存由程序分配和释放. ...
- WiFi流量劫持—— JS脚本缓存投毒
在上一篇<WiFi流量劫持—— 浏览任意页面即可中毒>构思了一个时光机原型,让我们的脚本通过HTTP缓存机制,在未来的某个时刻被执行,因此我们可以实现超大范围的入侵了. 基于此原理,我们用 ...
- .NET 4.0 版本号
.NET 4.5.1, .NET 4.5 和 .NET 4.0 均基于 .NET 4.0 CLR,而 .NET 4.5 对 CLR进行了升级和Bug修复. .NET 4.0 - 4.0.30319.1 ...
- Android5.1.1源码 - zygote fork出的子进程如何权限降级
前言 所有Android应用进程都是zygote fork出来的,新fork出来的应用进程还保持着root权限,这显然是不被允许的,所以这个fork出来的子进程的权限需要被降级,本文说的就是Andro ...
- 《代码的未来》读书笔记：内存管理与GC那点事儿
一.内存是有限的 近年来,我们的电脑内存都有好几个GB,也许你的电脑是4G,他的电脑是8G,公司服务器内存是32G或者64G.但是,无论内存容量有多大,总归不是无限的.实际上,随着内存容量的增加,软件 ...
- JSON Web Token实际应用
一.JWT认证方式的实现方式 1.客户端不需要持有密钥,由服务端通过密钥生成Token. 2.客户端登录时通过账号和密码到服务端进行认证,认证通过后,服务端通过持有的密钥生成Token,Token中一 ...