html 弹出div 居中 可移动
来源：互联网 发布：易语言json解析 编辑：程序博客网 时间：2024/05/17 22:45
<!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>
