可缩放、拖动，关闭或最小化的JS窗口

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<title>可缩放、拖动，关闭或最小化的JS窗口</title>
<style type="text/css">
	.divWindow{word-wrap:break-word;position:absolute; overflow:hidden;}
	.divBar{border:#000000 1px solid;position:absolute;border-bottom:#000000 1px solid;width:100%;height:20px;background-color:#0099FF;cursor:hand;line-height:20px;}
	.divChange{position:absolute;right:25px;font-size:10pt;}
	.divClose{position:absolute;right:5px;font-size:11pt;}
	.divTitle{position:absolute;left:5px;font-size:10pt;white-space:nowrap;text-overflow:ellipsis;-o-text-overflow:ellipsis;overflow: hidden;}
	.divContent{border:#000000 1px solid;border-top:#000000 0px solid;position:absolute; top:20px;width:100%; background-color:#FFFFFF; overflow-y:auto;
				SCROLLBAR-BASE-COLOR: #FFFFFF;SCROLLBAR-ARROW-COLOR: #999999;SCROLLBAR-FACE-COLOR: #EEEEEE;SCROLLBAR-HIGHLIGHT-COLOR: #EEEEEE;
				SCROLLBAR-SHADOW-COLOR: #EEEEEE;SCROLLBAR-3DLIGHT-COLOR: #FFFFFF;SCROLLBAR-TRACK-COLOR: #FFFFFF;SCROLLBAR-DARKSHADOW-COLOR: #CCCCCC;}
	.divReSize{height:7px; width:7px; overflow:hidden; background-color:#0000FF; position:absolute; bottom:6px; right:6px; cursor:nw-resize}
	.divIframe{height:100%;width:100%;}
</style>
<script language="javascript">
var zindex=0		//全局变量
function dragClass(name,title,content,left,top,width,height){
var isMouseDown=false;
var maximum=false;
var offX=0;			//设置抓取点X坐标
var offY=0;			//设置抓取点Y坐标
var oldLeft;		//保存正常状态的X坐标
var oldTop;			//保存正常状态的Y坐标
this.mousedown= function (){				//按下拖动点
     Bar.setCapture(); //设置抓取
     offX=parseInt(event.clientX)-parseInt(Window.style.left);
     offY=parseInt(event.clientY)-parseInt(Window.style.top);
     isMouseDown=true;
	if(Window.style.zIndex<=zindex){
		zindex++;
		Window.style.zIndex=zindex;
	}
}
this.mousemove= function (){				//拖动窗口
     if (isMouseDown && !maximum){
		Bar.style.cursor='move'
		Window.style.left=event.clientX-offX;
		Window.style.top=event.clientY-offY;
		if(Window.style.zIndex<=zindex){
			zindex++;
			Window.style.zIndex=zindex;
		}
     }
}
this.mouseup=function (){					//松开按钮
     Bar.releaseCapture();     //取消抓取
     Bar.style.cursor='hand';
     if (parseInt(Window.style.top)<0){
		   Window.style.top='0px';
     }
     if (parseInt(Window.style.left)<0){
		   Window.style.left='0px';
     }
     isMouseDown=false;
}
this.dblclick=function (){				//双击最大最小化
     if (!maximum){
		  oldLeft=Window.style.left;			//保存正常状态的X坐标
		  oldTop=Window.style.top;				//保存正常状态的Y坐标
		  Window.style.left='0px';
		  Window.style.top='0px';
		  Window.style.width= document.body.clientWidth;				//网页可见区域宽
		  Title.style.width=(document.body.clientWidth-40)+'px';		//设置标题长度
		  ReSize.style.display='none';
		  if(Change.innerText=='－'){
			   Window.style.height='100%';
			   Content.style.height=document.body.clientHeight-20;	//网页可见区域宽-标题高度
		  }else{
			   Window.style.height='20px';
		  }
		  maximum=true;
     }else{
		  Window.style.left=oldLeft;
		  Window.style.top=oldTop;
		  Window.style.width=width+'px';
		  Title.style.width=(width-40)+'px';
		  ReSize.style.display='';
		  if(Change.innerText=='－'){
			   Window.style.height=height+'px';
			   Content.style.height=parseInt(height-20)+'px';
		  }else{
			   Window.style.height='20px';
		  }
		  maximum=false;
     }
	if(Window.style.zIndex<=zindex){
		zindex++;
		Window.style.zIndex=zindex;
	}
}
this.changeWindow=function (){			//收缩窗口
     event.cancelBubble=true;
	 if(Change.innerText=='－'){
		  Window.style.height='20px';
		  Change.innerText='□';
		  Content.style.display='none';
		  ReSize.style.display='none';
     }else{
		  if (maximum){
			   Window.style.height='100%';
			   Content.style.display='';
			   ReSize.style.display='';
			   Content.style.height=document.body.clientHeight-20;	//网页可见区域宽-标题高度
		  }else{
			   Window.style.height=height+'px';
			   Content.style.display='';
			   ReSize.style.display='';
			   Content.style.height=parseInt(height-20)+'px';
		  }
		  Change.innerText='－';
     }
}
//--------------------------------------------DIV-------------------------------------------------//
var Window=document.createElement("div");
	Window.id="divWindow"+ name;
	Window.className="divWindow";
	Window.style.left=left+'px';
	Window.style.top=top+'px';
	Window.style.width=width+'px';
	Window.style.height=height+'px';
	Window.onclick=function(){
		if(parseInt(Window.style.zIndex)<=zindex){
			zindex++;
			Window.style.zIndex=zindex;
		}
	}
this.Window=Window;						//公有属性，类外可操作；若要在类外操作，可将元素改为公有属性
	
var Bar=document.createElement("div");
	Bar.id="divBar"+name;
	Bar.onselectstart="return false";
	Bar.className="divBar";
	Bar.onmousedown=this.mousedown;
	Bar.ondblclick=this.dblclick;
	Bar.onmousemove=this.mousemove;
	Bar.onmouseup=this.mouseup;
	Window.appendChild(Bar);
var Title=document.createElement("span");
	Title.id="divTitle"+ name;
	Title.className="divTitle";
	Title.style.width=(width-40)+'px';				//自适应标题长度
	Title.innerText=title;
	Bar.appendChild(Title);
var Change=document.createElement("span");
	Change.id="divChange"+ name;
	Change.className="divChange";
	Change.innerText="－";
	Change.ondblclick=this.changeWindow;
	Change.onclick=this.changeWindow;
	Bar.appendChild(Change);
var Close=document.createElement("span");
	Close.id="divClose"+ name;
	Close.onclick=function(){
		Window.style.display='none';
	}
	Close.className="divClose";
	Close.innerText="×";
	Bar.appendChild(Close);
var Content=document.createElement("div");
	Content.id="divContent"+ name;
	Content.className="divContent"
	Content.innerHTML=content;
	Content.style.height=parseInt(height-20)+'px';
	Window.appendChild(Content);
	
var ReSize=document.createElement("div");
	ReSize.className="divReSize";
	ReSize.onmousedown=function(){
		if(Window.style.zIndex<=zindex){
			zindex++;
			Window.style.zIndex=zindex;
		}
		ReSize.setCapture();
		isMouseDown=true;
	}
	ReSize.onmousemove=function(){
		 if (isMouseDown && !maximum)
		 {
			width=parseInt(event.clientX)-parseInt(Window.style.left)+5;
			height=parseInt(event.clientY)-parseInt(Window.style.top)+5;
			if(width>100){							//设置最小宽度
				Window.style.width=width+'px';
				Title.style.width=(width-40)+'px';
			}
			if(height>100){							//设置最小高度
				Window.style.height=height+'px';
				Content.style.height=parseInt(height-20)+'px';
			}
		 }
	}
	ReSize.onmouseup=function(){
		ReSize.releaseCapture();
		isMouseDown=false;
	}
	Window.appendChild(ReSize);
var Iframe=document.createElement("iframe");	//添加iframe，IE6.0下遮挡<select>控件
	Iframe.className="divIframe";
	Window.appendChild(Iframe);
	
	document.body.appendChild(Window);
//--------------------------------------------DIV-------------------------------------------------//
}
</script>
<body>
<select style="position:absolute; top:600;"></select>
<script>
//dragClass(ID,窗口标题,内容,X坐标,Y坐标,宽,长)
var c1="窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1";
objWin1=new dragClass('win1','拖动窗口1',c1,0,60,300,300);
var c2="窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2";
objWin2=new dragClass('win2','拖动窗口2',c2,350,60,300,300);
var objWin3;
function openWin(){
	if(objWin3==null){
		var c3="123窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3";
		objWin3=new dragClass('win3',c3,c3,700,60,300,300);
	}else{
	   if(objWin3.Window.style.display=='none'){
			objWin3.Window.style.display='';
	   }
	}
}
</script>
<input type="button" value="弹出【窗口3】" onClick="openWin()" />
</body>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

可缩放、拖动，关闭或最小化的JS窗口

分类

表格图层

描述

可缩放、可拖动，可关闭或最小化的JS窗口，另有弹出窗口，仿Windows的窗口效果，很不错的代码，平时大家会用到的，作为学习的参考资料也是有价值的。