彈出可拖動的div

時間 2019-11-08
標籤彈出拖動 div 欄目 CSS 简体版
原文原文鏈接
彈出可拖動的div，可用於登陸的時候彈出登陸框的div，測試經過。（其中用到了js的閉包功能） javascript
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>POP</title>
<style type="text/css">
#clk{width:100px;height:100px;background-color:orange;position:absolute;top:500px;}
#layer{position: fixed; background:rgb(0, 0, 0) none no-repeat scroll 0% 0% ;}
#pop{position:absolute;display:none;}
#drag{background-color:orange;cursor:move;}
#close{position:absolute;float:left;cursor:pointer;display:inline;right:10px;}
</style>
<script type="text/javascript">

window.onload = function(){
	//遮罩
	var layer = document.getElementById("layer");

	var btn = document.getElementById("btn");
	var pop = document.getElementById("pop");
	var drag = document.getElementById("drag");

	var clk = document.getElementById("clk");

	popLayer(btn);

	//拖動
	var disX = "";
	var disY = "";
	drag.onmousedown = function(ev){		
		var oEvent = ev||event;
		disX = oEvent.clientX - pop.offsetLeft;
		disY = oEvent.clientY - pop.offsetTop;

		document.onmousemove = function(ev){
			var oEvent = ev||event;
			var l = oEvent.clientX - disX;
			var t = oEvent.clientY - disY;
			//吸附效果
			if(l<50) l=0;
			if(t<50) t=0;
			if(l>(document.documentElement.clientWidth-pop.offsetWidth-50))
				l=document.documentElement.clientWidth-pop.offsetWidth;
			//拖拽到靠近左上角時 彈出層拉伸至當前可視區的高度  拖離開後恢復
			if(l<50 && t<50){
				l=0;
				t=0;
				pop.style.height = document.documentElement.clientHeight+"px";
			}
			if(l>0 || t<0){
				pop.style.height = "200px";
			}
			pop.style.left = l+"px";
			pop.style.top = t+"px";
		}
		document.onmouseup = function(){
			document.onmousemove = null;
			document.onmouseup = null;
		}

		return false;
	}
	var close = document.getElementById("close");
	closeLayer(close);

	function popLayer(btn){
		btn.onclick = function(){
			//遮罩
			with(layer.style){
				display="block";
				top = "0px";
				left = "0px";
				width = document.documentElement.clientWidth+"px";
				height = document.documentElement.clientHeight+"px";
				zIndex = 1000;
				opacity = 0.3;
				filter = "alpha(opacity:30)";
				//保證在窗口大小變化的時候遮罩大小跟着改變
				window.onresize = function(){
					width = document.documentElement.clientWidth+"px";
					height = document.documentElement.clientHeight+"px";
				}
			}
			//彈出的層
			var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
			var scrollLeft = document.documentElement.scrollLeftp || document.body.scrollLeft;

			//startMove2(pop,{height:200,width:200,borderRadius:10},false);
			with(pop.style){
				display="block";
				zIndex = 1000;
				height = "200px";
				width = "200px";
				backgroundColor="white";
				//確保彈出的層始終在可視區大約中間的位置
				top = parseInt((document.documentElement.clientHeight-pop.offsetHeight)/2-100)+scrollTop+"px";
				left = parseInt((document.documentElement.clientWidth-pop.offsetWidth)/2-100)+scrollLeft+"px";
			}
		}
	}
	//關閉彈出層
	function closeLayer(close){
		close.onclick = function(){
			//遮罩
			with(layer.style){
				top = "0px";
				left = "0px";
				width = 0;
				height = 0;
				zIndex = 0;
				display = "none";
			}
			with(pop.style){
				top = "0px";
				left = "0px";
				display="none";
				width = 0;
				height = 0;
				zIndex = 0;
			}
		}
	}	
}

</script>

</head>
<body style="height:2000px">
<div id="clk">
	<button id="btn">彈出div</button>
</div>

<br/><br/><br/><br/><br/><br/><br/>
<a href="#">a</a>
<a href="#">a</a>
<a href="#">a</a>

<div id="layer"></div>

<div id="pop">
	<div id="drag">
		拖動
		<div id="close">X</div>
	</div>
	<a href="javascript:alert(1);">彈出層內容</a>

</div>

</body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。