弹窗组件源码 :
var Lcf_Dialog = {
blackLayer : null,
tc : null,
alpha : null,
browserType : null,
browserIsIe6 : null,
json : null,
//初始化
init : function(obj)
{
this.alpha = 50;
this.browserIsIe6 = false;
this.checkIe6();
this.checkBrowserType();
this.json = {};
for(var i in obj) {
this.json[i] = obj[i];
}
},
//判断是否是ie6
checkIe6 : function()
{
if (!-[1,]&&!window.XMLHttpRequest)
{
this.browserIsIe6 = true;
}
},
//检测浏览器类型,用于背景渐变动画
checkBrowserType : function()
{
//非ie或者ie9以上(包含ie9)
if( typeof document.body.style.opacity != 'undefined' )
{
this.browserType = 1;
}
//ie
else
{
this.browserType = 0;
}
},
//创建遮罩层
createBlackLayer : function(json)
{
this.blackLayer = document.createElement('div');
this.blackLayer.style.width = '100%';
this.blackLayer.style.height = '100%';
this.blackLayer.style.position = this.browserIsIe6? 'absolute':'fixed';
this.blackLayer.style.top = '0px';
this.blackLayer.style.left = '0px';
//设置背景颜色
if (typeof this.json.bgColor != 'undefined')
{
this.blackLayer.style.backgroundColor = this.json.bgColor;
}
else
{
this.blackLayer.style.backgroundColor = '#000';
}
//设置背景透明度
if (typeof this.json.alpha != 'undefined')
{
this.blackLayer.style.opacity = this.json.alpha / 100;
this.blackLayer.style.filter = 'alpha(opacity=' + this.json.alpha + ')';
}
else
{
this.blackLayer.style.opacity = 0.5;
this.blackLayer.style.filter = 'alpha(opacity=50)';
}
//是否有背景渐变
if (typeof this.json.backgroundAnimation != 'undefined' && this.json.backgroundAnimation == true)
{
this.blackLayer.style.opacity = 0;
this.blackLayer.style.filter = 'alpha(opacity=0)';
}
this.blackLayer.style.zIndex = 9998;
this.blackLayer.style.display = 'none';
if (this.browserIsIe6)
{
this.blackLayer.style.height = document.body.scrollHeight + 'px';
}
document.body.appendChild(this.blackLayer);
},
//遮罩层动画
blackLayerAnimation : function()
{
if (typeof this.json.backgroundAnimation != 'undefined' && this.json.backgroundAnimation == true)
{
var step = 0;
var self = this;
var id = window.setInterval(function(){
step+= (self.browserType==1? 0.1 : 10);
self.blackLayer.style[ (self.browserType==1? 'opacity' : 'filter') ] = self.browserType==1? step : 'alpha(opacity=' + step + ')';
if (typeof self.json.alpha != 'undefined')
{
if ( step >= (self.browserType == 1? self.json.alpha / 100 : self.json.alpha) )
{
window.clearInterval(id);
}
}
else
{
if ( step >= (self.browserType == 1? 50 / 100 : 50) )
{
window.clearInterval(id);
}
}
}, 50);
}
},
//显示弹窗
showDialog :function(obj)
{
this.setDialogProperty(obj);
this.tc.style.display = 'block';
this.blackLayer.style.display = 'block';
this.blackLayerAnimation();
this.dialogAnimation();
},
//设置弹窗属性
setDialogProperty : function(obj)
{
this.init(obj);
this.createBlackLayer(this.json);
this.tc = document.getElementById( this.json.id );
var tcW = this.json.w;
var tcH = this.json.h;
this.tc.style.position = 'fixed';
this.tc.style.top = '50%';
this.tc.style.left = '50%';
this.tc.style.marginTop = -tcH / 2 + 'px';
this.tc.style.marginLeft = -tcW / 2 + 'px';
this.tc.style.zIndex = 9999;
//ie6处理
if (this.browserIsIe6)
{
var y = document.documentElement.scrollTop || document.body.scrollTop;
this.tc.style.position = 'absolute';
this.tc.style.top = (y + document.documentElement.clientHeight / 2) + 'px';
var self = this;
window.onscroll = function(e)
{
y = document.documentElement.scrollTop || document.body.scrollTop;
if (y + (tcH + tcH/2) >= document.body.scrollHeight) {return;}
self.tc.style.top = (y + document.documentElement.clientHeight / 2) + 'px';
}
window.onresize = function(e)
{
self.blackLayer.style.width = document.body.offsetWidth + 'px';
}
}
},
//弹窗动画
dialogAnimation : function()
{
if (typeof this.json.tcAnimation != 'undefined' && this.json.tcAnimation == true)
{
if (this.browserIsIe6) {return;}
this.tc.style.top = '57%';
var self = this;
var step = 0;
var stepArr = [57, 54, 53, 52, 51, 50];
var id = window.setInterval(function(){
self.tc.style.top = stepArr[step] + '%';
step++;
if (step > stepArr.length - 1)
{
window.clearInterval(id);
}
}, 50);
}
},
//获取样式
getStyle : function(obj, key)
{
if (typeof window.getComputedStyle != 'undefined')
{
return window.getComputedStyle(obj, null)[key];
}
else if (typeof obj.currentStyle != 'undefined')
{
return obj.currentStyle[key];
}
},
//关闭弹窗
closeDialog : function()
{
document.body.removeChild(this.blackLayer);
this.tc.style.display = 'none';
}
}
html代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="gbk">
<title>弹窗案例</title>
<style type="text/css">
body{margin:0px; padding:0px; font-size:30px; font-family: '微软雅黑'; overflow-x: hidden;}
ul,ol,h1,h2,h3,h4,h5,h6,dl,dd,p,form{margin:0px; padding:0px;}
ul,ol{list-style-type:none;}
.tc{ width: 300px; height: 300px; font-size: 50px; text-align: center; background: red; position: relative; }
.close{ position: absolute; top: -10px; right: -26px; font-size: 20px; font-size: 30px; font-weight: bold; text-decoration: none; }
</style>
</head>
<body>
<a href="javascript:Lcf_Dialog.showDialog({'id':'tc', 'w':300, 'h':300})"> 弹窗至少需要3个参数:id、弹窗宽、弹窗高 </a>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<a href="javascript:Lcf_Dialog.showDialog({'id':'tc', 'w':300, 'h':300, 'alpha':90})"> alpha能设置背景透明度,参数是1~100,默认是50 </a>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<a href="javascript:Lcf_Dialog.showDialog({'id':'tc', 'w':300, 'h':300, 'backgroundAnimation':true})"> backgroundAnimation设置为true时,遮罩层渐变出现</a>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<a href="javascript:Lcf_Dialog.showDialog({'id':'tc', 'w':300, 'h':300, 'tcAnimation':true})">tcAnimation设置为true时,弹窗以动画形式出现。(ie6无效)</a>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<a href="javascript:Lcf_Dialog.showDialog({'id':'tc', 'w':300, 'h':300, 'bgColor':'red'})"> bgColor能修改遮罩层的颜色 </a>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<a href="javascript:Lcf_Dialog.showDialog({'id':'tc', 'w':300, 'h':300, 'alpha': 70, 'backgroundAnimation':true, 'tcAnimation':true, 'bgColor':'blue'})"> 所有参数都有 </a>
<div id='tc' style='display:none;'>
<div class='tc'>
<p>测试案例</p>
</div>
<a class='close' href="javascript:Lcf_Dialog.closeDialog()">x</a>
</div>
</body>
<script src='Lcf_Dialog.js'></script>
</html>
具体案例 :http://download.csdn.net/detail/qq408896436/9452862