可拖动弹出层

最新推荐文章于 2024-01-06 11:51:11 发布

shaq34

最新推荐文章于 2024-01-06 11:51:11 发布

阅读量274

点赞数

CC 4.0 BY-SA版权

文章标签： HTML

本文链接：https://blog.youkuaiyun.com/shaq34/article/details/83612900

弹出层的位置是当前窗口的正中央，而不是页面的正中央，页面高度较大时有用。
样式可以在引用页自行添加。

页面：


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE></TITLE>
  <script src="popD.js"></script>
 </HEAD>

 <BODY>

 最底层内容
  <div id="main" style="display:none;">
  <div id="title" style="width:100%;background-color:red;">title</div>
弹出层<input type="button" value="隐藏" id="hid" onclick="closeD();">
  </div>
    最底层内容
	<input type="button" value="显示" id="show" onclick="popD('main','title',300,200);">
	<TABLE style="height:1000px;">
	<TR>
		<TD></TD>
	</TR>
	</TABLE>

	最底层内容<input type="button" value="显示" id="show" onclick="popD('main','title',300,200);">
 </BODY>
</HTML>

popD.js



var mainDiv;
var bgDiv;
function popD(mainId, titleId, w, h) {
	mainDiv = document.getElementById(mainId);
	var bw = document.body.scrollWidth;
	var bh = document.body.scrollHeight;
	var ch = document.body.clientHeight;
	var top = document.body.scrollTop;
	bh = bh < ch ? ch : bh;
	bgDiv = document.createElement("div");
	document.body.appendChild(bgDiv);
	bgDiv.style.width = bw + "px";
	bgDiv.style.height = bh + "px";
	bgDiv.style.opacity = "0.5";
	bgDiv.style.backgroundColor = "#D1EEEE";
	bgDiv.style.position = "absolute";
	bgDiv.style.left = "0";
	bgDiv.style.top = "0";
	bgDiv.style.zIndex = "98";
	mainDiv.style.display = "";
	mainDiv.style.backgroundColor = "green";
	mainDiv.style.width = w + "px";
	mainDiv.style.height = h + "px";
	mainDiv.style.position = "absolute";
	mainDiv.style.zIndex = "99";
	mainDiv.style.left = (bw - w) / 2 + "px";
	mainDiv.style.top = top + (ch - h) / 2 + "px";
	mainDiv.style.display = "";
	var x0 = 0, y0 = 0, x1 = 0, y1 = 0;
	var moveable = false;
	var tDiv = document.getElementById(titleId);
	tDiv.onmousedown = function () {
		tDiv.style.cursor = "move";
		if (event.button == 1) {
			tDiv.setCapture();
			x0 = event.clientX;
			y0 = event.clientY;
			x1 = parseInt(mainDiv.offsetLeft);
			y1 = parseInt(mainDiv.offsetTop);
			moveable = true;
		}
	};
	tDiv.onmouseup = function () {
		if (moveable) {
			tDiv.releaseCapture();
			moveable = false;
		}
	};
	tDiv.onmousemove = function () {
		if (moveable) {
			var x = x1 + event.clientX - x0;
			var y = y1 + event.clientY - y0;
			if (x + w < bw && x > 0) {
				mainDiv.style.left = x;
			}
			if (y + h < bh && y > 0) {
				mainDiv.style.top = y;
			}
		}
	};
}
function closeD() {
	bgDiv.style.display = "none";
	mainDiv.style.display = "none";
}