[收藏]JS模拟窗口

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

function $()

{

var arr=new Array();

for (var i=0; i < arguments.length; i++)

{

var aa=arguments[i];

if(typeof(aa)=='string')

{

aa=document.getElementById(aa);

}

if(arguments.length==1)

{

return aa;

}

arr.push(aa);

}

return arr;

}

function Cmsgbox()

{

this.title=null;

this.message=null;

this.left=[];

this.top=[];

this.isminibox=[];

this.width=[];

this.id=0;

this.hover='orange';

this.normal='slategray';

this.dragenable=false;

this.x=0;

this.y=0;

this.curindex=100;

this.actindex=null;

this.modal=true;

this.bgdivobj=null;

}

Cmsgbox.prototype.subwin=function(msg,fcallback,tit,w,l,t,modal,type)

{

var buttoncss="69px;height:20px;color:#333;cursor:hand;";

if(type==2)

{

if(modal=="undefined"||modal==null)

modal=false;

this.isminibox[this.id]=false;

}

this.basemsg(tit,msg,w,l,t,modal);

var str="<div id='"+this.id+"csubwin' onmousedown='Cmgbox.totop(this)' style='z-index:"+(this.curindex++)+";background-color:white;position:absolute;border:2px solid "+this.normal+";left:"+this.left[this.id]+"px;top:"+this.top[this.id]+"px;"+this.width[this.id]+"px;' >";

str+="<div style='padding-bottom:2px;background-color:"+this.normal+";100%;height:16px;color:white;' ";

str+="onmousedown='Cmgbox.begindrag(this)' onmousemove='Cmgbox.ondrag(this)' onmouseup='Cmgbox.enddrag(this)' ";

if(type==2)

str+="ondblclick='Cmgbox.minibox(this.childNodes(1))'";

str+="><div style='float:left;height:16px;overflow:hidden;margin:0px;padding:4px 0px 0px 5px;"+(this.width[this.id]-2*14-5)+";'>"+this.title+"</div>";

if(type==2)

str+="<span style='14px;font-family:webdings;cursor:hand;' onclick='Cmgbox.minibox(this)'>0</span><span style='14px;font-family:webdings;cursor:hand;' onclick='Cmgbox.closediv(this)'>r</span>";

str+="</div><div style='margin:10px 5px 10px 10px;word-break:break-all;'>"+this.message+"</div>";

if(type==0||type=="undefinded"||type==null||type==""||type==1)

{

typestr="<input type='button' style='"+buttoncss+"' id='boxyes' value='确定' />";

if(type==1)

typestr+="   <input type='button' style='"+buttoncss+"' value='取消' onclick='Cmgbox.closediv(this)' />";

str+="<div style=text-align:right;margin:0px;padding:7px;padding-right:15px;background:#ccc;'>"+typestr+"</div></div>";

}

if(this.modal)

this.showbgdiv(this.curindex-2);

this.id++;

document.body.insertAdjacentHTML("beforeEnd",str);

if(type!=2)

{

$("boxyes").focus();

$("boxyes").onclick=function()

{

Cmgbox.closediv(this);

if(fcallback)

fcallback();

}

Cmsgbox.prototype.showbgdiv=function(zindex)

{

var swidth,sheight;

swidth=document.body.offsetWidth+document.body.offsetLeft*2;

if(document.body.clientHeight<screen.height)

sheight=screen.height;

else

sheight=document.body.clientHeight+document.body.offsetTop*2;

var bgobj=document.createElement("div");

bgobj.setAttribute('id','bgdiv');

bgobj.style.position="absolute";

bgobj.style.top="0px";

bgobj.style.background="#ccc";

bgobj.style.filter="progid:dximagetransform.microsoft.alpha(style=3,opacity=25,finishopacity=75)";

bgobj.style.left="0px";

bgobj.style.width=swidth;

bgobj.style.height=sheight;

bgobj.style.zIndex = zindex;

bgobj.oncontextmenu=function(){return false;}

bgobj.ondragstart=function(){return false;}

bgobj.onselectstart=function(){return false;}

document.body.appendChild(bgobj);

this.bgdivobj=bgobj;

}

////////////////////////关闭窗口////////////////////////

Cmsgbox.prototype.closediv=function(obj)

{

if(this.modal)

{

document.body.removeChild(this.bgdivobj);

this.bgdivobj=null;

this.modal=false;

}

obj.parentNode.parentNode.removeNode(true);

}

//////////////////////使窗口出现在最顶端/////////////////////////

Cmsgbox.prototype.totop=function(obj)

{

this.actindex=this.curindex-1;

if(obj.style.zIndex<this.actindex)

obj.style.zIndex=this.curindex++;

}

/////////////////////开始拖动///////////////////////////////////////////

Cmsgbox.prototype.begindrag=function(obj)

{

if(event.button==1)

{

this.dragenable=true;

obj.setCapture();

var box=obj.parentNode;

this.x=event.clientX;

this.y=event.clientY;

box.style.borderColor=this.hover;

obj.style.backgroundColor=this.hover;

box.style.filter="progid:DXImageTransform.Microsoft.shadow(direction=135,color=#8E8E8E,strength=5)";

}

///////////////////////////拖动中////////////////////////////////////////

Cmsgbox.prototype.ondrag=function(obj)

{

if(this.dragenable)

{

var box=obj.parentNode;

var i=parseInt(box.id);

var boxleft=event.clientX-this.x+this.left[i];

var boxtop=event.clientY-this.y+this.top[i];

if(boxleft>0&&boxleft+this.width[i]<(document.body.offsetWidth+document.body.offsetLeft*2))

box.style.pixelLeft=boxleft;

if(boxtop>0)

box.style.pixelTop=boxtop;

}

//////////////////////////结束拖动/////////////////////////////////

Cmsgbox.prototype.enddrag=function(obj)

{

if(this.dragenable)

{

var box=obj.parentNode;

var i=parseInt(box.id);

this.dragenable=false;

box.style.borderColor=this.normal;

obj.style.backgroundColor=this.normal;

this.left[i]=box.style.pixelLeft;

this.top[i]=box.style.pixelTop;

box.style.filter="";

obj.releaseCapture();

}

/////////////////////////窗口最小化///////////////////////////////

Cmsgbox.prototype.minibox=function(obj)

{

var title=obj.parentNode;

var i=parseInt(title.parentNode.id);

if(this.isminibox[i]=!this.isminibox[i])

{

title.nextSibling.style.display="none";

obj.innerHTML="2";

}

else

{

title.nextSibling.style.display="";

obj.innerHTML="0";

}

Cmsgbox.prototype.basemsg=function(tit,msg,w,l,t,modal)

{

this.title=tit||"系统消息";

this.message=msg;

if(modal=="undefined"||modal==null)

modal=true;

if(w=="undefined"||w==null||w=="")

w=300;

if(l=="undefined"||l==null||l=="")

l=parseInt((document.body.clientWidth-w)/2);

if(t=="undefined"||t==null||t=="")

t=100+document.body.scrollTop;

this.left[this.id]=l;

this.top[this.id]=t;

this.width[this.id]=w;

this.modal=modal;

}

/////////////////////实例化/////////////////////////////////////

var Cmgbox=new Cmsgbox();

window.subwin=function(msg,tit,w,l,t,modal){Cmgbox.subwin(msg,function(){},tit,w,l,t,modal,2);} //跳出子窗口例:window.subwin(标题,内容,宽,X坐标,Y坐标,是否模态显示); （默认为非模态）

window.msgbox=function(msg,fcallback,tit,type,modal){return Cmgbox.subwin(msg,fcallback,tit,"","","",modal,type);}//跳出模态选框例:window.msgbox(标题,内容,类型选择,是否模态显示);(type=0:alert; type=1:confirm)

</script>

<title>无标题文档</title>

<style>

body{

font-size:12px;

}

</style>

</head>

<body>

<a href="javascript:window.subwin('tit后。当然也之页全部html标签之后你已经试过放在这里，但是发现根本不起作用，这就涉及到下一个要注意的问题了df可能是发现根本不起作用，这就涉及到下一个要注意的问题了。<br><br>2、Build函数的最后，你是通过insertAdjacentHTML()方法把生成的代码放在了网le','title')">跑出一个框</a>

<a href="javascript:window.subwin('你已经l标签之后你已经试过所以应该把对无法获取，方，也就是xWinxx赋值这个工作放在窗口第一次初始化完成的地放在这里，但是发现根本不起作用，这就涉及到下一个要注意的问试过放在这里','标题')">跑出一个框</a>

<a href="javascript:window.subwin('放在build语句之后。当然也可能是发现根本不起作用，这就涉及到下一个要注意的问题了。<br><br>2、Build函数的最后，你是通过insertAdjacentHTML()方法把生成的代码放在了网页全部html标签之后你已经试过放在这里，但是发现根本不起作用，这就涉及到下一个要注意的问题了了网页全部html标','子窗口',600)">跑出一个框</a>

<a href="javascript:window.subwin('页全部htfsdfs导致无法获取，所以应该把对xx赋值这个工作放在窗口第一次初始化完成的地方，也就是xWin函数中，this.b代码放在了网页全部html标签之后你已经试过ml','要注意的问题了df')">跑出一个框</a>

</body>

</html>