可拖拽变大小的弹出层

小提示

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代码

复制格式化注释注释清空

放大

<!DOCTYPE html PUBLIC "-//W3C//h2D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/h2D/xhtml1-transitional.h2d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>可拖拽变大小的弹出层</title>
<style>
* { padding: 0; margin: 0; }
li { list-style: none; }
body { background: #eee; }
.drag_layer { width: 450px; height: 270px; border: 1px solid #aaaaaa; padding: 3px; position: absolute; top: 0px; left: 0px; background: #fff; overflow:hidden; }
.drag_layer h2 { height: 25px; line-height: 25px; padding-left: 10px; font-size: 14px; color: #333; background: url(//ku.shouce.ren/files/images/201601/56a316c384fee.gif) repeat-x; border: 1px solid #aaaaaa; cursor: move; position: relative; }
.drag_layer .close { width: 21px; height: 20px; background: url(//ku.shouce.ren/files/images/201601/56a316c47a4a6.gif) no-repeat 0 bottom; position: absolute; top: 2px; right: 3px; }
.drag_layer .close:hover { background: url(//ku.shouce.ren/files/images/201601/56a316c47a4a6.gif) no-repeat 0 0; }
.drag_layer .content { padding: 10px; overflow:auto; }
.drag_layer .content p { font-size: 12px; line-height: 18px; color: #666; text-indent: 28px; padding-bottom: 10px; font-family: arial; }
.drag { width: 14px; height: 14px; overflow: hidden; background: url(//ku.shouce.ren/files/images/201601/56a316d0205a7.gif) no-repeat 1px 1px; cursor: nw-resize; position: absolute; top: 262px; right: 0; z-index: 2; }
.bar_t { width: 410px; height: 4px; position: absolute; top: -2px; left: -2px; z-index: 1; cursor: n-resize; overflow: hidden; }
.bar_b { width: 410px; height: 4px; position: absolute; bottom: -2px; left: -2px; z-index: 1; cursor: n-resize; overflow: hidden; }
.bar_r { width: 4px; height: 110px; position: absolute; right: -2px; top: -2px; z-index: 1; cursor: e-resize; }
.bar_l { width: 4px; height: 110px; position: absolute; left: -2px; top: -2px; z-index: 1; cursor: e-resize; }
</style>
<script type="text/javascript">
var oMsgbox=null;
var g_orgTop=0;
var g_orgHeight=0;
var g_orgLeft=0;
var g_orgWidth=0;

var oContent=null;
var oDragBoth=null;
var oDragL=null;
var oDragT=null;
var oDragR=null;
var oDragB=null;

function doTDrag(x, y)
{
	var h=2*g_orgHeight-y;
	if(h<35)
	{
		h=35;
	}
	
	oMsgbox.style.top=g_orgTop+g_orgHeight-h+'px';
	oMsgbox.style.height=h-8+'px';
	
	oDragL.style.height=h+2+'px';
	oDragR.style.height=h+2+'px';
	
	oDragBoth.style.top=h-16+'px';
}

function doRDrag(x, y)
{
	if(x<110)
	{
		x=110;
	}
	oMsgbox.style.width=x-8+'px';
	
	oDragT.style.width=x+2+'px';
	oDragB.style.width=x+2+'px';
}

function doBDrag(x, y)
{
	if(y<35)
	{
		y=35;
	}
	oMsgbox.style.height=y-8+'px';
	
	oDragL.style.height=y+2+'px';
	oDragR.style.height=y+2+'px';
	
	oDragBoth.style.top=y-16+'px';
}

function doLDrag(x, y)
{
	var w=2*g_orgWidth-x;
	if(w<110)
	{
		w=110;
	}
	oMsgbox.style.left=g_orgLeft+g_orgWidth-w+'px';
	oMsgbox.style.width=w-8+'px';
	
	oDragT.style.width=w+2+'px';
	oDragB.style.width=w+2+'px';
}

PerfectDraging.prototype.startDrag=function (oEvent)
{
	var oPos=this.fnGetPos();
	var x=oEvent.clientX;
	var y=oEvent.clientY;
	this.__oStartOffset__.x=x-oPos.x;
	this.__oStartOffset__.y=y-oPos.y;
	
	if(this.oElement.setCapture)
	{
		this.oElement.setCapture();
		
		this.oElement.onmouseup=this.fnOnMouseUp;
		this.oElement.onmousemove=this.fnOnMouseMove;
	}
	else
	{
		document.addEventListener("mouseup", this.fnOnMouseUp, true);
		document.addEventListener("mousemove", this.fnOnMouseMove, true);
		
		window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
	}
};

PerfectDraging.prototype.stopDrag=function (oEvent)
{
	if(this.oElement.releaseCapture)
	{
		this.oElement.releaseCapture();
		
		this.oElement.onmouseup=null;
		this.oElement.onmousemove=null;
	}
	else
	{
		document.removeEventListener("mouseup", this.fnOnMouseUp, true);
		document.removeEventListener("mousemove", this.fnOnMouseMove, true);
		
		window.releaseEvents(Event.MOUSE_MOVE | Event.MOUSE_UP);
	}
};

PerfectDraging.prototype.doDrag=function (oEvent)
{
	var x=oEvent.clientX;
	var y=oEvent.clientY;
	this.fnOnDrag(x-this.__oStartOffset__.x, y-this.__oStartOffset__.y);
};
</script>
</head>
<body style="height:2000px;">
<div id="msgbox" class="drag_layer">
    <h2>
        <strong title="这里是标题">手册网</strong>
        <a href="#" class="close" title="关闭"></a>
    </h2>
    <div class="content">
        <div class="aTxt">
            <p>手册网为编程爱好者提供编程源码、网站源码、网页素材、书籍教程、网站模板、网页特效代码等，做有质量的学习型源码下载站。</p>
</div>
	<p><strong>注：</strong>拖拽四边和右下角均可改变div大小</p>
	</div>
    <div class="drag"></div>
    <div class="bar_t"></div>
    <div class="bar_r"></div>
    <div class="bar_b"></div>
    <div class="bar_l"></div>
</div>
</body>
</html>

CSS代码

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

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

可拖拽变大小的弹出层

分类

表格图层

描述

可拖拽变大小的弹出层，本弹出层不涉及HTML5以及CSS3，因此兼容性方面范围比较宽，支持时下流行的多种浏览器，比如IE8+、火狐、Chrome、Opera等，360极速双核浏览器也有完美表现。本JS弹出层支持向上拖拉伸长窗口，支持按住标题栏拖动窗...