<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
var x0 = 0, y0 = 0, x1 = 0, y1 = 0;
var moveable = false;
function startDrag(obj) {
if (event.button == 1) {
//0 没按键 1 按左键 2 按右键 3 按左和右键 4 按中间键 5 按左和中间键 6 按右和中间键 7 按所有的键
obj.setCapture(); ////设置捕获范围
var win = obj.parentNode; //得到层的父节点
x0 = event.clientX;
y0 = event.clientY;
x1 = parseInt(win.offsetLeft);
y1 = parseInt(win.offsetTop);
moveable = true;
}
}
function drag(obj) {
if (moveable) {
var win = obj.parentNode;
var bodywidth = document.body.clientWidth;
var bodyheight = document.body.clientHeight;
var divwidth = win.clientWidth;
var divheight = win.clientHeight;
var x, y;
//控制left边界
if ((x1 + event.clientX - x0) < 0)//超过左边
{
x = 0;
}
else if ((x1 + event.clientX - x0 + divwidth) > bodywidth) {//超过右边
x = bodywidth - divwidth;
}
else {
x = x1 + event.clientX - x0;
}
//控制top边界
if (y1 + event.clientY - y0 < 0) {//超过顶边
y = 0;
}
else if ((y1 + event.clientY - y0 + divheight) > bodyheight) {//超过底边
y = bodyheight - divheight;
}
else {
y = y1 + event.clientY - y0;
}
win.style.left = x;
win.style.top = y;
}
}
function stopDrag(obj) {
if (moveable) {
obj.releaseCapture();
moveable = false;
}
}
function SetDivLayerAtCenter(objLayerName) {
objLayer = document.getElementById(objLayerName);
objLayer.style.top = document.body.clientHeight / 2 - objLayer.style.height.toLowerCase().replace('px', '') / 2;
objLayer.style.left = document.body.clientWidth / 2 - objLayer.style.width.toLowerCase().replace('px', '') / 2;
}
function ShowDiv(objID) {
SetDivLayerAtCenter(objID);
document.getElementById(objID).style.display = "";
}
function HideDiv(objID) {
document.getElementById(objID).style.display = "none";
}
</script>
</head>
<body>
<a href="javascript:ShowDiv('SearchLay')" title="弹出层"> 弹出层</a>
<div id="SearchLay" style="position: absolute; left: 15px; top: 69px; width: 225px; height: 225px; z-index: 1; display: none;">
<iframe style="position:absolute; z-index:-1; top:0; left:0; width: 100%; height:100%; filter:alpha(opacity=0);"></iframe>
<div onmousedown="startDrag(this)" onmouseup="stopDrag(this);" onmousemove="drag(this)">
<table height="10" cellspacing="0" cellpadding="1" width="225" border="0">
<tr>
<td width="100%" height="1" valign="top" class="SearchbgColor">
<table height="21" cellspacing="0" cellpadding="0" width="100%"
border="0">
<tr>
<td style=" background-color:Yellow;">
我是弹出层头
</td>
<td align="center" width="50" style=" background-color:Yellow;">
<a href="javascript:HideDiv('SearchLay')">关闭弹出层</a>
</td>
</tr>
</table>
<table bgcolor="blue" width="225"><tr><td height="20"></td></tr></table>
<table cellspacing="0" cellpadding="0" width="225" border="0" bgcolor="blue">
<tr>
<td height="100">
我是弹出层喔，亲
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
相关推荐
js弹出层居中可移动 js弹出层居中可移动
此项目是在MVC5的框架里自己用Jquery写的一个弹出层居中，并显示半透明的遮罩，点击遮罩任意地方就隐藏弹出层
兼容ie，FF，chrome，opera的弹出层居中js。
点击文字或按钮，弹出一个遮罩层并居中显示，单击其他地方，可以自动关闭遮罩层
DIV始终居中的半透明弹出层.rarDIV始终居中的半透明弹出层.rarDIV始终居中的半透明弹出层.rar
很实用的弹出div居中效果，代码简洁，修改灵活。适合新手使用。一看即懂。
jQuery弹出层垂直居中效果 jQuery弹出层垂直居中效果 jQuery弹出层垂直居中效果 jQuery弹出层垂直居中效果
NULL 博文链接：https://rogerfederer.iteye.com/blog/1833775
弹出层（遮罩层）弹出页面垂直居中，一个不错的例子，可拿来使用。
jquery实现让弹出层绝对居中。
javascript 弹出层居中效果的制作 * { padding:0; margin:0; list-style:none; } body { font-family:Verdana, Geneva, sans-serif; font-size:14px; } #a { width:300px; height:80px; border:5px solid #d3d3d3...
jQuery点击遮罩弹出层固定居中代码是一款自适应的图片加文字遮罩弹窗代码，适用于手机端的网页遮罩弹出层代码。
1. 弹出绝对居中层 2. 企业级应用标准，支持SharePoint 3. 基于ASP.ENT, JavaScript, CSS开发
DIV始终居中的半透明弹出层DIV始终居中的半透明弹出层
遮罩弹出层 ; charset=utf-8" /> <title>jquery弹出层鼠标点击弹出层可浮动在...弹出层当鼠标点击文字或图片弹出层，弹出层浮动在屏幕上可以随浏览器上下滚动，弹出层可自动居中在页面中间。jquery下载。" /> </head>
jquery弹出层当鼠标点击文字或图片弹出层，弹出层浮动在屏幕上可以随浏览器上下滚动，弹出层可自动居中在页面中间
网页上的点击弹出层代码，居中显示 点击弹出居中的遮罩层代码