<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弹出层居中可移动技术解析 #### 一、引言 在网页开发过程中，弹出层（Modal）是一种常见的交互设计模式，用于在当前页面上展示额外的信息或功能，而无需重新加载页面。其中，弹出层能够居中显示并且可以被...
在本项目"Mvc5jQuery弹出层居中并显示遮罩"中，开发者利用Microsoft的ASP.NET MVC5框架和jQuery库，实现了弹出窗口的居中显示以及半透明遮罩效果，提升了用户界面的美观度和易用性。 首先，我们来了解一下MVC5框架...
首先，我们要理解“弹出层居中问题版1”所提及的挑战。在网页设计中，实现弹出层的居中并不总是直截了当的，这可能涉及到CSS布局、窗口大小变化的响应式设计以及浏览器兼容性问题。通过阅读博文链接，我们可以获取更...
标题“兼容ie，FF，chrome，opera的弹出层居中js”所指的就是一个JavaScript实现的弹出层（popup layer）定位代码，它能在Internet Explorer（IE）、Firefox（FF）、Chrome以及Opera这些主流浏览器中实现居中显示。...
在网页设计中，"不错的弹出层居中效果锁定屏幕" 是一个常见的需求，尤其是在创建模态框、对话框或提示信息时。这个标题描述了一个简单而实用的解决方案，允许弹出层（通常是div元素）在页面中央显示，并且能够固定在...
在网页设计中，"DIV始终居中的半透明弹出层"是一个常见的需求，它涉及到CSS布局、定位以及透明度设置等多个技术点。下面将详细解释这些知识点。 首先，`DIV`是HTML中的一个块级元素，常用于创建网页布局结构。在本...
点击文字或按钮，弹出一个遮罩层并居中显示，单击其他地方，可以自动关闭遮罩层
3. **CSS样式应用**：为了让弹出层居中，我们需要设置合适的CSS样式。弹出层的宽度应根据内容动态调整，而垂直居中可以通过计算窗口高度和弹出层高度，然后设置适当的`margin-top`实现。水平居中可以使用`margin: ...
ASP.NET绝对居中弹出层是一种常见的Web应用交互设计，常用于显示重要的信息或进行用户交互，如登录对话框、消息提示或表单提交。在ASP.NET框架中，结合JavaScript和CSS，我们可以创建一个高性能、高用户体验的弹出...
此外，如果弹出层包含动态内容，如异步加载的数据，可能需要在内容加载完成后再次调用 `centerPopup` 函数，以确保弹出层始终居中。 在实际开发中，还可以利用CSS3的 `transform` 属性配合 `translateX` 和 `...
1. JavaScript 弹出层居中效果的制作： - 实现弹出层（如提示框）的居中显示，是用户界面设计中常见的需求，可以让对话框或者信息提示更加美观和友好。 - 在Web开发中，弹出层居中可以通过多种方式实现，例如使用...
为了让弹出层在页面中看起来更加专业且用户体验良好，通常会要求它们能够自动居中显示。jQuery，一个广泛使用的JavaScript库，提供了丰富的功能来简化DOM操作，包括实现弹出层的居中对齐。本文将详细介绍如何使用...
3. **居中对齐**：让`div`弹出层居中，可以采用以下几种方式： - 使用负边距：通过计算`div`的宽度和高度的一半，然后设置负的`margin-left`和`margin-top`来实现。 - 使用`transform`属性：设置`transform: ...
/* 使弹出层居中 */ width: 300px; height: auto; /* 弹出层大小 */ background-color: white; /* 背景颜色 */ border: 1px solid black; /* 边框 */ padding: 20px; /* 内容区边距 */ box-shadow: 0 0 10px ...
/* 使弹出层居中 */ width: 400px; padding: 20px; background-color: white; border: 1px solid #ccc; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3); z-index: 9999; /* 确保弹出层在其他元素之上 */ } ``` ...
弹出层（遮罩层）弹出页面垂直居中，一个不错的例子，可拿来使用。