弹窗层效果的实现（非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 ...
随机推荐
- 输出日志实例改成用Spring的AOP来实现
1.采用Interception Around通知的形式实现 Interception Around通知会在Join Point的前后执行,实现Interception Around通知的类需要实现接 ...
- 初学者-PHP笔记
PHP介绍 PHP 是 "PHP Hypertext Preprocessor" 的首字母缩略词 PHP 是一种被广泛使用的开源脚本语言 PHP 脚本在服务器上执行 PHP 没有成 ...
- mysql 命令行还原备份数据库
通常数据库还原备份可以通过navicat等数据库管理工具进行,只需要简单的导出导入就行了,但遇到有索引外键的数据库,数据库管理工具运行.sql文件会报错,这时候可以尝试命令行导入,亲测可以成功 MyS ...
- TCP三次握手四次挥手
看到一篇总结很好的TCP三次握手,学习一下,原文链接. 建立TCP需要三次握手才能建立,而断开连接则需要四次握手.整个过程如下图所示: 先来看看如何建立连接的. 首先Client端发送连接请求报文,S ...
- Ajax请求
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" ...
- Jquery 仿 android Toast效果
JS代码如下: /** * 模仿android里面的Toast效果,主要是用于在不打断程序正常执行的情况下显示提示数据 * @param config * @return */var Toast = ...
- Android图片资源
title: 2016-5-5未命名文件 tags: UI适配,图片资源 grammar_cjkRuby: true --- 概述: 本文整理了Android开发中,图片资源的提供方式和使用方式.包括 ...
- 已经过事务处理的 MSMQ 绑定(转载)
https://msdn.microsoft.com/zh-cn/biztalk/ms751493 本示例演示如何使用消息队列 (MSMQ) 执行已经过事务处理的排队通信. 注意 本主题的末尾介绍了此 ...
- Meteor+AngularJS：超快速Web开发
为了更好地描述Meteor和AngularJS为什么值得一谈,我先从个人角度来回顾一下这三年来WEB开发的变化: 三年前,我已经开始尝试前后端分离,后端使用php的轻量业务逻辑框架.但 ...
- SQL Server 查询分解
标签:SQL SERVER/MSSQL SERVER/数据库/DBA/查询步骤 概述 查询步骤是很基础也挺重要的一部分,但是我还是在周围发现有些人虽然会语法,但是对于其中的步骤不是很清楚,这里就来分解 ...