html 弹出div 居中可移动

最新推荐文章于 2021-06-29 02:46:12 发布

feiyu8607

最新推荐文章于 2021-06-29 02:46:12 发布

阅读量4.1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/feiyu8607/article/details/9106885

本文介绍了一个使用JavaScript实现的可拖动并能自动居中的HTML弹窗。该弹窗具备显示、隐藏功能，并可通过头部进行拖拽定位。文章提供了完整的代码示例，演示了如何利用JavaScript获取窗口尺寸、元素位置等信息，以实现元素的精确控制。

<!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>
<style type="text/css">
.show,.hide{
	position:absolute;
	width:200px;
	height:200px;
	border:5px solid #ccc;
	background-color:red;
	font-size:14px;
	font-weight:bold;
	padding:5px;
	text-align:center;
	color:#a24;
}

.hide{
	display:none;
}

#header{
	width:80%;
	height:8px;
	background-color:#AAAAAA;
	cursor:move;
	float:left;
}
</style>
</head>

<body>
<div id="c" class="hide">
	<div>
		<div id="header">Title</div>
		<div id="close" style="float:right;background-color:#FFFFFF;">Close</div>
	</div>
通过JS控制层绝对居中
</div>
<div style="width:500px;height:1000px;background-color:#FFFFFF;"></div>
<div onclick="show();">点我</div>
<SCRIPT LANGUAGE="JavaScript">
	var a = document.getElementById("c");
	var header = document.getElementById("header");
	var oClose = document.getElementById("close");
	var bDrag = false;
	var disX = disY = 0;

   function show(){
	   var scrollTop = window.pageYOffset  
                || document.documentElement.scrollTop  
                || document.body.scrollTop  
                || 0;

		a.className = "show";
		a.style.left=(document.documentElement.clientWidth/2-a.clientWidth/2)+"px";
		a.style.top=(scrollTop+document.documentElement.clientHeight/2-a.clientHeight/2)+"px";
	    
   }

	oClose.onclick = function ()
	{
		a.className = "hide";
		
	};
	oClose.onmousedown = function (event)
	{
		(event || window.event).cancelBubble = true;
	};

	header.onmousedown = function (event)
	{		
		var event = event || window.event;
		bDrag = true;
		disX = event.clientX - a.offsetLeft;
		disY = event.clientY - a.offsetTop;		
		this.setCapture && this.setCapture();		
		return false
	};
	document.onmousemove = function (event)
	{
		if (!bDrag) return;
		var event = event || window.event;
		var iL = event.clientX - disX;
		var iT = event.clientY - disY;
		var maxL = document.documentElement.clientWidth - a.offsetWidth;
		var maxT = document.documentElement.clientHeight - a.offsetHeight;		
		iL = iL < 0 ? 0 : iL;
		//iL = iL > maxL ? maxL : iL; 		
		iT = iT < 0 ? 0 : iT;
		//iT = iT > maxT ? maxT : iT;
		
		a.style.marginTop = a.style.marginLeft = 0;
		a.style.left = iL + "px";
		a.style.top = iT + "px";		
		return false
	};
	document.onmouseup = window.onblur = header.onlosecapture = function ()
	{
		bDrag = false;
		header.releaseCapture && header.releaseCapture();
	};
</SCRIPT> 
</body>
</html>