一个弹窗组件

弹窗组件源码 ：

 

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