js弹窗

zhou695105338

浏览: 20983 次
性别:
来自: 北京

最近访客更多访客>>

hpu145

tiedachengxuyuan

luocongjay

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

json IE HTML JavaScript CSS

自己写的一个弹窗程序，大家多指教

支持alert,confim,prompt和自定义模式，支持拖拽

ie6,7,8 firefox,chrome,opera,safari测试通过

// JavaScript Document 
var bodyMargin,bodyOverflow,htmlOverflow;
var b,box,iframe,title,message,btns,btnOK,btnCan;
var a;
/*
-------------打开弹窗-----------
参数-->  json方式 支持参数:width,height,title,message,mode=["A"(alert),"C"(confim),"P"(prompt)],sure(此参数是在C/P模式下确定按钮触发的函数),html(html优先mode,自定义弹出框内容)
		非json方式:1个参数-->提示信息
				  2个参数-->宽度，长度
				   		   标题，信息
				  		   模式,确定函数
				  3个参数-->宽度，长度,信息
				  		   信息,模式,确定函数
				  
				  4个参数-->宽度，长度,标题,信息
				  		   标题,信息,模式,确定函数
				  
*/
function ialert(){
	var boxBackColor="white";
	var titleBackColor="#9EC4F5";
	var btnBackColor="#ddd";
	
	var bodyW = document.body.clientWidth;
	var bodyH = Math.max(document.body.clientHeight,document.documentElement.clientHeight);
	var docH = Math.max(document.body.offsetHeight,document.documentElement.offsetHeight);
	
	a=analysisArgu(arguments);	//初始化参数列表
	initEnvironment();
	b = createEle({				//透明背景
		tag:"div",
		style:"position:absolute;left:0;top:0;width:100%;height:100%;background:black url(overlay.png);filter:alpha(opacity:20);opacity:0.2;z-index:100;",
		height:docH,
		parent:document.body
	});
	box = createEle({			//弹窗
		tag:"div",
		style:"width:"+(a.width?parseInt(a.width):300)+"px;height:"+(a.height?parseInt(a.height):150)+"px;background:"+boxBackColor+";z-index:101",
		parent:document.body,
		abscenter:true
	});
	iframe = !isNavi("ie",6)?null:createEle({			//修复ie6下拉框bug
		tag:"iframe",
		style:"position:absolute;left:0;top:0;width:100%;height:100%;background:black;filter:alpha(opacity:20);opacity:0.2;z-index:100;",
		height:bodyH,
		parent:document.body
	});
	var isBig = box.offsetWidth>=400?true:false;	//窗体是否够大
	var boxW = box.offsetWidth;
	var boxH = box.offsetHeight;
	var btnClose = createEle({	//关闭按钮
		tag:"a",
		style:"position:absolute;left:"+(boxW-25)+"px;top:3px;font:14px bold;z-index:102;display:block;text-decoration:none;border:1px solid lightgray;font-family:黑体,雅黑,宋体 ",
		attrs:{href:"javascript:cls();","class":"ialert_a"},
		parent:box,
		html:"×"
	});
	if(a.html) {				//自定义代码模式
		box.html(a.html);
		makeDragable(box);
		return ;
	}
	title = createEle({		//标题
		tag:"div",
		style:"height:"+(isBig?35:25)+"px;width:100%;background:"+titleBackColor+";text-align:left;line-height:"+(isBig?35:25)+"px;letter-spacing:2px;font-weight:bold;cursor:move"
			  +";font-family:黑体，宋体",
		html:"<span style='margin-left:20px;cursor:move;' selectable='false'>"+((a.title||a.title=="")?a.title:"提示")+"</span>",
		parent:box
	});
	message = createEle({	//提示信息
		tag:"p",
		style:"text-align:left;height:50%;padding:0 10px;text-indent:20px;font-size:12px;line-height:22px;",
		html:(a.message||a.message=="")?a.message:"确定吗？",
		parent:box
	});
	btns = createEle({
		tag:"div",
		parent:box,
		style:"text-align:right;border-top:1px solid grey;background-color:"+btnBackColor+";padding-top:10px;position:absolute;bottom:0px;right:0px;width:100%;height:35px;"
	});
	switch(a.mode){
		case "A":
			A();
			break;
		case "C":	
			C();
			break;
		case "P":
			P();
			break;
		default:
			A();
			break;
	}
	title.onmousedown = function(){
		makeDragable(box);
	}
	box.onmouseup = function(){
		dragObject = null;
	}
}
//----------alert模式---------
var A=function(){
	btnOK = createEle({
		tag:"input",
		style:"border:1px solid grey;padding:5px 15px !important;padding:3px 8px;margin-right:20px;",
		parent:btns,
		attrs:{
			type:"button",
			value:"确定"	
		}
	});
	btnOK.onclick=function(){cls();};
}
//------------confirm模式-------------
var C = function(){
	A();
	btnOK.onclick=function(){
		cls();
		try{
			a.sure();
		}catch(e){
			ialert({message:"confirm模式下，必须定义确定按钮触发事件"});
		}
	};
	btnCan = createEle({
		tag:"input",
		style:"border:1px solid grey;padding:5px 15px !important;padding:3px 8px;margin-right:20px;",
		parent:btns,
		attrs:{
			type:"button",
			value:"取消"
		}
	});
	btnCan.onclick=cls;
}
//------------prompt模式-----------
var P = function(){
	A();
	message.html(a.message?a.message:"");
	message.style.textAlign="center";
	var txt = createEle({
		tag:"input",
		style:"border:1px solid;height:25px;line-height:25px;border-bottom-color:#999;border-right-color:#999;background-color:white;border-left-color:#ccc;border-top-color:#ccc",
		attrs:{type:"text"},
		parent:message
	});
	btnOK.onclick=function(){
		cls();
		try{
			a.sure(txt.value);
		}catch(e){
			ialert({message:"prompt模式下，必须定义确定按钮触发事件"});
		}
	}
	title.html("<span style='margin-left:20px;cursor:move;' selectable='false'>请输入</span>");
}

//-----------解析参数---------
function analysisArgu(){
	var argu = {};
	var argus = arguments[0];
	switch(argus.length){
		case 1:
			if(typeof(argus[0])=="string"){							//参数为提示信息
				argu.message=argus[0];
			}else argu = argus[0];									//参数为json方式
			break;
		case 2:
			if(parseInt(argus[0])){									//宽度，长度
				argu.width=parseInt(argus[0]);
				argu.height=parseInt(argus[1]);	
			}else if(typeof(argus[1])=="function"){					//模式,确定函数
				argu.mode=argus[0];
				argu.sure=argus[1];
			}else{													//标题，信息
				argu.title=argus[0];
				argu.message=argus[1];
			}
			break;
		case 3:
			if(parseInt(argus[0])){									//宽度，长度，信息
				argu.width=parseInt(argus[0]);
				argu.height=parseInt(argus[1]);
				argu.message=argus[2];
			}else{													//信息，模式，确定函数
				argu.message=argus[0];
				argu.mode=argus[1];
				argu.sure=argus[2];
			}
			break;
		case 4:
			if(parseInt(argus[0])){									//宽度，长度，标题,信息
				argu.width=parseInt(argus[0]);
				argu.height=parseInt(argus[1]);
				argu.title=argus[2];
				argu.message=argus[3];
			}else{													//标题,信息，模式，确定函数
				argu.title=argus[0];
				argu.message=argus[1];
				argu.mode=argus[2];
				argu.sure=argus[3];
			}
			break;
	}
	return argu;
}
//-----------创建元素-------------
function createEle(argu){
	var ele = document.createElement(argu.tag);
	if(argu.style) ele.style.cssText=argu.style;
	if(argu.cssClass) ele.className = argu.cssClass;
	if(argu.height) ele.style.height=parseInt(argu.height)+"px";
	if(argu.width) ele.style.width = parseInt(argu.width)+"px";
	if(argu.abscenter)	{
		var scrolltop = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
		var scrollleft = Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);
		ele.style.cssText+=";position:absolute;left:50%;top:50%;margin-left:"+
		(-parseInt(ele.style.width)/2+scrollleft)+"px;margin-top:"+(-parseInt(ele.style.height)/2+scrolltop)+"px;";
	}
	if(argu.attrs){
		for(var attr in argu.attrs){
			ele.setAttribute(attr,argu.attrs[attr]);
		}
	}
	if(argu.html) ele.innerHTML = argu.html;
	if(argu.child){
		var child = argu.child;
		if(!child.length)  ele.appendChild(child);
		else{
			for(var i=0;i<child.length;i++){
				ele.appendChild(child[i]);
			}
		}
	}
	if(argu.parent)	argu.parent.appendChild(ele);
	ele.html=function(){
		if(arguments.length==0) return ele.innerHTML;
		else {ele.innerHTML = arguments[0];	return ele;}
	}
	ele.remove=function(){
		if(arguments.length==0) ele.parentNode.removeChild(ele);
		else ele.removeChild(arguments[0]);
	}
	return ele;
}
//------------初始化环境-----------
function initEnvironment(){
	//createStyle();
	addCssByStyle();
	bodyMargin = document.body.style.margin;
	bodyOverflow = document.body.style.overflow;
	htmlOverflow = document.documentElement.style.overflow;
	document.body.style.cssText="margin:0;overflow:hidden;";
	if(window.ActiveXObject) document.documentElement.style.overflow="hidden";
}
//-------------还原环境------------
function regainEnvironment(){
	document.body.style.margin = bodyMargin;
	document.body.style.overflow = bodyOverflow;
	document.documentElement.style.overflow = htmlOverflow;
}
//----------关闭弹窗--------
function cls(){
	regainEnvironment();
	document.body.removeChild(b);
	document.body.removeChild(box);
	if(iframe) document.body.removeChild(iframe);
}
//------------创建css样式表--------
//ie6,7下如果样式表也是动态创建的，元素也是动态创建的，则样式无效
function createStyle(){
	var styles = document.getElementsByTagName("style");
	if(styles.length==0){
	if(document.createStyleSheet) document.createStyleSheet();
	else  createEle({
			tag:"style",
			parent:document.getElementsByTagName("head")[0],
			attrs:{type:"text/css"}
		});
	}
	var mystyle=styles[0];
	if(mystyle.media!=null)  {
		mystyle.media="screen";
	}
	var text = ".ialert_a,.ialert_a:visited{border:1px solid lightgray;background:#fff;}.ialert_a:hover{background:#ccc}";
	if(mystyle.styleSheet) {
		mystyle.styleSheet.cssText=text;
	}
	else mystyle.innerHTML=text;
}
//------------另一种创建样式表方式-----------
function addCssByStyle(cssString){
    var doc=document;
    var style=doc.createElement("style");
    style.setAttribute("type", "text/css");
	
	var cssString = ".ialert_a,.ialert_a:visited{border:1px solid lightgray;background:#fff;}.ialert_a:hover{background:#ccc;}";
	
    if(style.styleSheet){// IE
        style.styleSheet.cssText = cssString;
    } else {//w3c
        var cssText = doc.createTextNode(cssString);
        style.appendChild(cssText);
    }
    var heads = doc.getElementsByTagName("head");
    if(heads.length)
        heads[0].appendChild(style);
    else
        doc.documentElement.appendChild(style);
}

//--------------判断浏览器--------------
function isNavi(browser,version){
	var tag=false;
	var agent = navigator.userAgent.toLowerCase();
	switch(browser.toLowerCase()){
		case "ie":
			if(agent.indexOf("msie")>0){
				if(version){
					if(agent.indexOf(version)>0&&agent.indexOf(version)-agent.indexOf("msie")<6) tag=true
				}else tag=true;
			}
	}
	return tag;
}
//-----------------元素拖拽---------------
var dragObject = null;
var mouseOffset = null;
document.onmousemove = function(ev){
	ev = ev || window.event;
	var mousePos = mouseCroods(ev);
	if(dragObject){
		dragObject.style.position = "absolute" ;
		//----------调试弹窗拖拽用的---------
		/*title.html(dragObject.offsetTop+"--"+(mousePos.y - mouseOffset.y)+"--|--"+dragObject.offsetLeft+"--"+(mousePos.x - mouseOffset.x ));
		message.html("dragobject:left-"+dragObject.offsetLeft+",top-"+dragObject.offsetTop+"<br />"+
			"mousePos:x-"+mousePos.x+",y-"+mousePos.y+"<br />"+
			"dargobject:marginleft->"+dragObject.style.marginLeft+"margintop->"+dragObject.style.marginTop);*/
		var marginTop = parseInt(dragObject.style.marginTop);
		var marginLeft = parseInt(dragObject.style.marginLeft);
		dragObject.style.top = mousePos.y - mouseOffset.y - (marginTop?marginTop:0) + "px";
		dragObject.style.left = mousePos.x - mouseOffset.x - (marginLeft?marginLeft:0) + "px";
		return false;
	}
}
document.onmouseup=function(){
	dragObject = null;
}
function makeDragable(obj){
	if(!obj) return;
	obj.onmousedown = function(ev){
		dragObject = this;
		mouseOffset = getMouseOffset(this,ev);
		return false;
	}
}
function getMouseOffset(target,ev){
	ev = ev || window.event;
	var docPos = getPosition(target);
	var mousePos = mouseCroods(ev);
	return {x:mousePos.x - docPos.x,y:mousePos.y - docPos.y}
}
function mouseCroods(ev){
	if(ev.pageX||ev.pageY){
		return {x:ev.pageX,y:ev.pageY}	
	}
	return {
		x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
		y:ev.clientY + document.body.scrollTop - document.body.clientTop
	}
}
function getPosition(e){
	var left = 0;
	var top = 0;
	while(e.offsetParent){
		left += e.offsetLeft;
		top += e.offsetTop;
		e = e.offsetParent;
	}
	left += e.offsetLeft;
	top += e.offsetTop;
	return {x:left,y:top}
}

下面是测试页面，测试之前把以上js代码复制保存为ialert.js文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="ialert.js"></script>
</head>

<body>

<div style="width:700px;margin:100px auto;padding:20px;border:1px solid blue;">

<div id="dragdiv" style="height:100px;border:1px solid;background:#ddd;width:400px;height:200px;cursor:move">拖拽测试</div>


<script>
makeDragable(document.getElementById("dragdiv"));
</script>



拖拽参考页面<a class="ialert_a" href="http://www.blogjava.net/flyingis/archive/2006/10/11/74591.html" target="_blank">http://www.blogjava.net/flyingis/archive/2006/10/11/74591.html</a>


    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p style="text-align:center;"><select>
    	<option>ie6 bug</option>
    </select></p>
	<input type="button" onclick="ialert('hello')" value="信息" />
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p style="text-align:center;"><select>
    	<option>ie6 bug</option>
    </select></p>
	<input type="button" onclick="ialert({width:400,height:250,title:'json',message:'json test'})" value="json" />
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p style="text-align:center;"><select>
    	<option>ie6 bug</option>
    </select></p>
	<input type="button" onclick="ialert(400,'500px')" value="宽度，长度" />
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p style="text-align:center;"><select>
    	<option>ie6 bug</option>
    </select></p>
	<input type="button" onclick="ialert('标题','信息')" value="标题，信息" />
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p style="text-align:center;"><select>
    	<option>ie6 bug</option>
    </select></p>
	<input type="button" onclick="ialert('P',function(txt){ialert(txt)})" value="模式，确定函数" />
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p style="text-align:center;"><select>
    	<option>ie6 bug</option>
    </select></p>
	<input type="button" onclick="ialert(400,'200px','这是信息')" value="宽度，长度,信息" />
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p style="text-align:center;"><select>
    	<option>ie6 bug</option>
    </select></p>
	<input type="button" onclick="ialert('信息','C',function(){ialert('C模式')})" value="信息，模式，确定函数" />
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p style="text-align:center;"><select>
    	<option>ie6 bug</option>
    </select></p>
	<input type="button" onclick="ialert(400,'200px','这是标题','这是信息')" value="宽度，长度,标题,信息" />
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kkdhktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p>kktewstlkadddfakdfa;lgkl;sdgjasdkgj ksdfjakdjfkajsdfk asdkjfadfioasdifoieterthjkghkjaskdfjkaskdfsdfasdofjk</p>
    <p style="text-align:center;"><select>
    	<option>ie6 bug</option>
    </select></p>
	<input type="button" onclick="ialert('标题','信息','C',function(){ialert('C模式')})" value="标题,信息，模式，确定函数" />
</div>
</body>
</html>

还有背景图片，爱加不加