您的位置：首页 > Web前端 > JavaScript

js 实现弹出层居中，并且层可以拖拽

2012-11-27 22:09 579 查看

这是一个用js实现弹出一个层，让层居中，并且可以拖拽喔,代码如下，复制粘贴后，保存成html，就可以直接看到效果喔，虽然界面有点丑，但功能实现了，希望大家一起来改进

<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 实现弹出层居中，并且层可以拖拽