弹窗层效果的实现（非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 ...
随机推荐
- Python之路第一课Day4--随堂笔记（迭代生成装饰器）
上节回顾: 1.集合 a.关系测试 b.去重 2.文件操作及编码 3.函数 4.局部变量和全局变量 上节回顾 本节课内容: 1.迭代器生成器 2.装饰器 3.json pickle数据序列化 4.软件 ...
- Xamarin的不归路-ios模拟器调整窗口大小
ios模拟器调整窗口大小:
- python方法中的self
前几天在写一个c作业时,突发奇想,在结构体中加入函数指针, 像这样: struct People { int _age; int (*age)(); }people; 这样调用时就可以 people. ...
- 关于IOS浏览器：document,body的click事件触发规则
今天做了个手机页面,点击某个按钮->弹出菜单,再点击菜单以外的任意位置->关闭菜单,在其他浏览器里面没有问题,但是在IOS浏览器中并不会关闭. 网上解决这个bug的帖子很多,这篇帖子主要是 ...
- java多线程系类：JUC原子类：01之框架
本系列内容全部来自于http://www.cnblogs.com/skywang12345/p/3514589.html 特在此说明!!!!! 根据修改的数据类型,可以将JUC包中的原子操作类可以分为 ...
- ABP理论学习之OWIN集成
返回总目录 如果你的应用中使用了OWIN,那么需要在主项目(一般来说是指Web项目)中添加Abp.Owin的nuget包,然后像下面那样在OWIN的 Startup文件中调用 UseAbp()扩展方法 ...
- MySQL HASH分区
200 ? "200px" : this.width)!important;} --> 介绍 基于给定的分区个数,将数据分配到不同的分区,HASH分区只能针对整数进行HASH ...
- Azure PowerShell (6) 设置单个Virtual Machine Endpoint
<Windows Azure Platform 系列文章目录> 请注意: - Azure不支持增加Endpoint Range - 最多可以增加Endpoint数量为150 http:// ...
- 2013 duilib入门简明教程 -- 响应按钮事件(4)
上一个Hello World的教程里有一句代码是这样的:CControlUI *pWnd = new CButtonUI; 也就是说,其实那整块绿色背景区域都是按钮的区域.(这里简要介 ...
- 探讨Js的事件的冒泡阶段
近来看到了一个新的知识点叫Js的事件冒泡,因此决定自己来研究一番. 大家应该都知道,Js中的事件处理分为三个阶段,1:事件的捕获阶段,2:处于目标阶段,3:事件的冒泡阶段.那么什么是事件的捕获和冒泡呢 ...