js弹窗

/**
 * 弹窗
 * 
 * 获取弹窗内穿出的数据:
 *     在弹窗页面调用父级页面的方法,例:parent.xxx(data);
 * 在 xxx()方法中将获取到的数据赋值给 abc 变量;在的点击弹
 * 窗确定按钮后调用 yyy()方法,将 abc 变量的值填充到页面的
 * 某处。
 * 
 * @param idName String 弹窗ID,不可重复
 * @param src String    要打开窗口的url
 * @param func function 回调函数,点击确定按钮后执行
 * @param title String  弹窗标题
 * @param divW int      弹窗宽度
 * @param divH int      弹窗高度
 * @param bottun boolean  是否显示确定按钮
 * @param topSize int   position的top值,距离顶部的距离,可用百分比
 * @param leftSize int  position的left值,距离顶部的距离,可用百分比
 * 
 * 可选参数可以填 null
 * function popup(idName,src[,func][,title][,divW][,divH][,bottun][,topSize][,leftSize]);
 */
function popup(idName,src,func,title,divW,divH,bottun,topSize,leftSize){

	if(typeof idName == 'undefined'){alert('ID名称没有');return;}
	if(typeof src == 'undefined'){alert('src没有');return;}
	if(typeof title == 'undefined'){title = '这是标题';}
	if(typeof func != 'function'){func = function(){}	}
	
	//弹窗宽度和高度
	var divW = (typeof divW == 'number') ? divW : 700;
	var divH = (typeof divH == 'number') ? divH : 500;
	//底边栏高度
	var divBottomH = (bottun == true) ? 40 : 30;
	var topSize = (typeof topSize == 'number' || typeof topSize == 'string' ) ? topSize : '3%';
	var leftSize = (typeof leftSize == 'number' || typeof leftSize == 'string' ) ? leftSize : '15%';
	
	var divTopH = 30;		//标题高度
	var divMiddleH = divH - divTopH - divBottomH;//iframe高度
	
	var div			= document.createElement('div');
	var divTop		= document.createElement('div');
	var divBigSmall	= document.createElement('div');
	var divClose		= document.createElement('div');
	var divLittle		= document.createElement('div');
	var divMiddle	= document.createElement('div');
	var divBottom		= document.createElement('div');
	var divBottonOk		= document.createElement('div');
	var divBottonCancel	= document.createElement('div');
	var divWiden		= document.createElement('div');
	
	//div 样式
	div.style.cssText = "width:"+divW+"px;height:"+divH+"px;position:fixed;top:"+topSize+";left:"+leftSize+";z-index:999;display:block;font-size:16px;font-family:Arial,'Microsoft YaHei';font-weight:bold;border:1px solid #3377bb;overflow:hidden;";
	div.id = idName;
	div.innerHTML = '';
	
	//divTop 样式
	divTop.style.cssText = "width:100%;height:"+divTopH+"px;line-height:"+divTopH+"px;text-indent:20px;color:#fff;background:#5599dd;cursor:move;";
	divLittle.style.cssText = "width:15px;height:13px;float:right;margin:8px 12px 0 0;cursor:pointer;border: 1px solid #fff;line-height:11px;text-indent:5px;font-weight:normal;";
	divBigSmall.style.cssText = "width:15px;height:13px;float:right;margin:8px 10px 0 0;cursor:pointer;border: 1px solid #fff;";
	divClose.style.cssText = "width:15px;height:13px;float:right;margin:8px 12px 0 0;cursor:pointer;border: 1px solid #fff;line-height:10px;text-indent:4px;font-weight:normal;font-size:13px;";
	divTop.innerHTML = title;
	divLittle.innerHTML = '-';
	divClose.innerHTML = 'x';
	//divMiddle 样式
	divMiddle.style.cssText = "width:100%;background:#fafaff;height:"+divMiddleH+"px;";
	divMiddle.innerHTML = '<iframe src="'+src+'" id="popup'+idName+'" name="popup'+idName+'" frameborder="0" width="100%" height="100%"></iframe>';
	
	//divBottom 样式
	divBottom.style.cssText = "width:100%;height:"+divBottomH+"px;background:#fafaff;";
	//ok cancel 样式
	var bottonH = 25;
	divBottonOk.style.cssText = "width:60px;height:"+bottonH+"px;float:right;line-height:"+bottonH+"px;background:#3377bb;cursor:pointer;text-align:center;color:white;margin:8px 20px 0 0;";
	divBottonCancel.style.cssText = "width:60px;height:"+bottonH+"px;float:right;line-height:"+bottonH+"px;background:#3377bb;cursor:pointer;text-align:center;color:white;margin:8px 20px 0 0;";
	divBottonOk.innerHTML = '确定';
	divBottonCancel.innerHTML = '取消';
	//右下拉动窗口 样式
	divWiden.style.cssText = "width:10px;height:10px;position:absolute;bottom:0px;right:0px;cursor:se-resize;";
	//OK 事件
	divBottonOk.onclick = function (){
		func();
		document.body.removeChild(div);
	}
	//cancel 事件
	divClose.onclick = divBottonCancel.onclick = function (){
		document.body.removeChild(div);
	}
	//移动窗口事件
	var L = null;	//上一次移动div后的div.style.left的值
	var T = null;
	divTop.onmousedown = function(e){
		var e = e || event;
		var left = e.clientX - div.offsetLeft;
		var top = e.clientY - div.offsetTop;
		document.onmousemove = function (ev){
			var ev = ev || event;
			L = div.style.left = ev.clientX - left + 'px';
			T = div.style.top = ev.clientY - top + 'px';
		}
		document.onmouseup = function (){
			document.onmousemove = null;
			document.onmouseup = null;
		}
	}
	//窗口放大缩小
	divBigSmall.onclick = divTop.ondblclick = function (){
		if(document.body.offsetWidth != div.offsetWidth - 2){
			div.style.top = '0px';
			div.style.left = '0px';
			div.style.width = '100%';
			div.style.height = '100%';
			divMiddle.style.height = div.offsetHeight - divTopH - divBottomH - 2 +'px';
		}else{
			if(L && T){
				div.style.top = T;
				div.style.left = L;
			}else{
				div.style.top = '5%';
				div.style.left = '15%';
			}
			div.style.width = divW+'px';
			div.style.height = divH+'px';
			divMiddle.style.height = divMiddleH+'px';
		}
	}
	//拉动改变窗口大小
	var W = null;
	var H = null;
	divWiden.onmousedown = function (e){
		var e = e || event;
		var X = e.clientX;
		var Y = e.clientY;
		divW = div.offsetWidth;
		divH = div.offsetHeight;
		document.onmousemove = function (ev){
			var ev = ev || event;
			W = ev.clientX - X;
			H = ev.clientY - Y;
			div.style.width = divW + W +'px';
			div.style.height = divH + H +'px';
			divMiddleH = div.offsetHeight - divTopH - divBottomH - 2;
			divMiddle.style.height = divMiddleH+'px';
		}
		document.onmouseup = function (){
			document.onmousemove = null;
			document.onmouseup = null;
			divW = divW + W;
			divH = divH + H;
		}
	}
	//最小化
	divLittle.onclick = function (){
		if(div.offsetWidth != 202 && div.offsetHeight != divTopH+2){
			div.style.width = '200px';
			div.style.height = divTopH+'px';
		}else{
			div.style.width = divW+'px';
			div.style.height = divH+'px';
		}
	}
	div.appendChild(divTop);
	divTop.appendChild(divClose);
	divTop.appendChild(divBigSmall);
	divTop.appendChild(divLittle);
	div.appendChild(divMiddle);
	divBottom.appendChild(divWiden);
	if(bottun){
		divBottom.appendChild(divBottonCancel);
		divBottom.appendChild(divBottonOk);
	}
	div.appendChild(divBottom);
	
	if(!document.getElementById(idName)){
		document.body.appendChild(div);
	}
};