自己写的一个弹窗程序,大家多指教
支持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.οnclick=function(){cls();}; } //------------confirm模式------------- var C = function(){ A(); btnOK.οnclick=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.οnclick=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.οnclick=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.οnmοuseup=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" οnclick="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" οnclick="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" οnclick="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" οnclick="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" οnclick="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" οnclick="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" οnclick="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" οnclick="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" οnclick="ialert('标题','信息','C',function(){ialert('C模式')})" value="标题,信息,模式,确定函数" />
</div>
</body>
</html>
还有背景图片,爱加不加