`

JS弹出居中的DIV的代码，跟着下拉条居中

div居中 
阅读更多

首先再次详细解释一下JS中窗口和网页的几种尺寸属性的含义
document.body.clientWidth（网页可见区域宽）：是指浏览器显示网页的区域宽度，不包括浏览器的边框宽度和垂直滚动条的宽度。大小随着浏览器的窗口大小而改变。
document.body.clientHeight（网页可见区域高）：是指浏览器显示网页的区域所能看到的高度，不包括浏览器的边框宽度和水平滚动条的高度。大小随着浏览器的窗口大小而改变。
document.body.scrollTop（网页被卷去的高）：是指拉动垂直滚动条时网页上面被地址栏及菜单栏遮盖着的部分的高。
document.body.scrollLeft（网页被卷去的左）：是指拉动水平滚动条时网页左面被左边线遮盖着的部分的宽。
现在我们来分析一下程序该如何实现：

第一步我们要实现的是使层在弹出时绝对居中不去考虑是否有滚动条的情况。
1.计算出层距离显示区域左边和上边的位置
注意：divId指的是所要居中的层,divId.clientWidth为其宽度！＠
var divId = document.getElementById("xxx");
var v_left=(document.body.clientWidth-divId.clientWidth)/2;
var v_top=(document.body.clientHeight-divId.clientHeight)/2;
2.把得到的值重新赋给DIV的left和top属性
divId.style.left＝v_left;
divId.style.top=v_top;
说明：divId为DIV标签的id值
这样这个层就是居中显示的了。
第二步我们要实现的是使在拖动滚动条的情况下弹出的层也能居中。
其实很简单我们只要把拖动的宽度和高度加到前面计算出来的左边距和上边距中就OK 了。
v_left+=document.body.scrollLeft;
v_top+=document.body.scrollTop;
2.把得到的值重新赋给DIV的left和top属性
divId.style.left＝v_left;
divId.style.top=v_top;
这样显示出来就是居中的了。
完整代码如下：

 

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">   
<html>   
<head>   
<title>弹出的层居中显示</title>   
<meta name="generator" content="editplus">   
<meta name="author" content="">   
<meta name="keywords" content="">   
<meta name="description" content="">   
<script language="javascript" type="text/javascript">   
function divcenter()   
{   
var divId=document.getElementById('mxh');   
divId.style.left=(document.body.clientWidth-divId.clientWidth)/2+document.body.scrollLeft;   
divId.style.top=(document.body.clientHeight-divId.clientHeight)/2+document.body.scrollTop;   
}   
</script>   
</head>   

<body>   
<table width=100%>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
<tr><td><span onclick="divcenter()">test</span></td></tr>   
</table>   
<div id=mxh style="position:absolute;left:200px;top:30px;width:200px;height:200px;background -color:navy;border:2px">我是居中显示的了。</div>   
</body>   
</html>

 

如果你想在拖动滚动条或是窗口重置大小时，层也能居中显示的话，可以在body的属性里面加上onresize="divcenter();"和 onscroll="divcenter();"就OK了，不过可能显示的效果不是很好，特别是在拖动滚动条时的效果可能是一擅一擅的，忒不爽。
注意：

 

运行后没有达到预期效果，输出 document.body.scrollTop 的值一看，一直都是 0。一翻折腾，原来是 DTD 的问题，要是页面直接用 <html> 开头的话就没有问题了。但是要符合 web 标准，DTD 当然是不能少的。

 

如果有 DTD 时用，那就用 document.documentElement.scrollTop 代替 document.body.scrollTop 就可以了。

 

我在项目上使用的代码：

    有DTD把body改成documentElement。

 function sc1(DivId) {
            //alert(document.documentElement.scrollTop);
            var Div = $(DivId);
            //alert( (document.body.clientHeight-document.getElementById("editMemberDiv").clientHeight)/2+document.documentElement.scrollTop-200);
            Div.css({
            "top":function (){return (document.documentElement.clientHeight-document.getElementById("editMemberDiv").clientHeight)/2+document.documentElement.scrollTop-200;},
            "left":function(){return (document.documentElement.clientWidth-document.getElementById("editMemberDiv").clientWidth)/2+document.documentElement.scrollLeft;}
            });

        }
        function scall() {
            sc1("#editMemberDiv");
        }

        window.onscroll = scall;
        window.onresize = scall;
        window.onload=scall;

 

 

 

分享到：
| request使用
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法

    在本篇文章中，我们会详细探讨如何使用JavaScript来制作一个简单而功能丰富的弹出层DIV，该DIV在页面中居中显示，并且在它上方会显示一个遮罩层。这种方法可以有效地聚焦用户的注意力到弹出层上，同时遮罩层可以避免...

    js实现点击向下展开的下拉菜单效果代码

    6. 具体代码实践：文档中提供的代码片段可以作为实现下拉菜单的模板，通过这种方式可以快速搭建一个基础的交互界面，但在生产环境中，还需要考虑到代码的优化、模块化、以及重用性等因素。除此之外，还需要注意代码...

    jQuery实现弹出窗口弹出div层的实例代码

    无论是改变浏览器窗口大小还是下拉滚动条，这个弹出层都能始终保持居中；点击页面的关闭按钮，弹出层消失，页面恢复原样。 这里借鉴之前的一篇文章《基于jQuery的固定飘浮层》，使弹出窗口可以始终固定在浏览器的正...

    弹出层效果（源代码）

    弹出层可能通过定位（absolute或fixed）使其相对于页面或屏幕居中，使用透明度或display属性来控制显示和隐藏，以及使用过渡动画增加用户体验。 - `position: absolute/fixed;`：绝对定位或固定定位使得弹出层可以...

    div弹出层 jquery

    在网页设计中，"div弹出层"是一种常见的交互元素，用于显示临时信息或与用户进行交互。jQuery库因其简洁的API和强大的功能，成为实现此类效果的首选工具。本主题将深入探讨如何利用jQuery来实现十种不同的弹出层效果...

    jquery弹出层特效

    4. **定位和调整**：根据需求，可能需要动态调整弹出层的位置，使其始终居中或相对于某个元素对齐。这可以通过计算页面宽度和高度以及弹出层尺寸来实现。 5. **阻止默认行为和模态效果**：对于模态弹出层，可以通过...

    选择用户地区div弹出 (2)

    在网页设计和开发中，"选择用户地区div弹出 (2)"是一个常见的功能，它涉及到...这两个`.zip`文件——"选择用户地区div弹出.zip"和"html.zip"可能包含了实现这一功能的HTML、CSS和JavaScript代码，供开发者参考和学习。

    html+js+css实现点击按钮弹出下拉交互

    - **下拉列表**: `&lt;div id="selector"&gt;...&lt;/div&gt;`，包含一个`&lt;ul&gt;`列表，每个`&lt;li&gt;`项代表一个选项。 #### 四、CSS样式详解 接下来是CSS部分： ```css #selector { visibility: hidden; position: absolute; ...

    经典的DIV+CSS小代码

    这个代码可能使用JavaScript创建了一个对话框式的弹出框，浮动在页面之上，通常用于提示信息或用户确认操作。 10. **一个经典的CSS标签面板.htm** 最后，这个文件可能展示了如何使用CSS创建标签面板，常用于展示...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    4.jQuery超炫淡入淡出效果DIV渐变居中弹出框插件下载 5.jquery黑色+蓝色风格DIV提示框示例 6.一款jQuery+DIV居中淡入淡出信息提示框示例 7.一款jQuery可拖动提示窗插件(对话框Dialog插件) 8.一款基于jQuery...

    Javascript、Css、Html下拉式折叠菜单

    ### JavaScript、CSS、HTML 下拉式折叠菜单知识点详解 #### 一、项目概述 ...通过以上知识点的学习，可以更好地理解并掌握JavaScript、CSS及HTML联合使用的技巧，进而开发出更加实用且美观的下拉式折叠菜单。

    纯CSS实现的下拉菜单

    为了使下拉菜单能够响应用户的鼠标操作，还使用了简单的JavaScript代码： 1. **全局变量**: - `timeout`: 控制延迟时间，用于关闭子菜单。 - `closetimer`: 记录关闭计时器ID。 - `ddmenuitem`: 当前打开的子...

    DIV+CSS导航栏

    本篇将深入探讨如何利用`DIV+CSS`创建导航栏，并介绍如何通过JavaScript进行动态控制。 首先，`DIV+CSS`导航栏的基本结构通常包括多个`&lt;div&gt;`元素，每个`&lt;div&gt;`代表导航栏的一个链接或功能区。这些`&lt;div&gt;`可以嵌套...

    导航经典推荐的23种div+css代码

    5. **水平居中导航**：使导航条元素在容器内水平居中，常见方法包括使用`text-align: center`、`display: flex`和`justify-content: center`等。 6. **透明导航**：导航栏背景透明，与页面背景融合。通过调整`...

    原生JS实现导航下拉菜单效果

    6. **JavaScript代码**： - 在JS代码中，需要监听`mouseover`和`mouseout`事件，根据事件触发时的元素状态来决定是否显示或隐藏二级菜单。 - 对每个一级菜单项添加事件监听器，并在事件处理函数中动态修改二级菜单...

    纯css实现鼠标滑过弹出层效果

    这个纯CSS实现的鼠标滑过弹出层效果不仅简化了代码，还提高了页面性能，因为不依赖JavaScript，对于那些禁用JavaScript的用户也能正常工作。此外，通过调整样式和元素结构，这种技术可以应用于各种各样的场景，如...

    DIV+CSS初学者布局教程

    7. **下拉及多级弹出式菜单**：`CSS网页布局入门教程13：下拉及多级弹出式菜单.doc`和`CSS网页布局入门教程14：纵向下拉及多级弹出式菜单.doc`则讲解了如何创建交互式的下拉菜单，这对于大型网站的导航非常有用，...

    基于JavaScript实现十五拼图代码实例

    JavaScript代码中的IIFE（立即调用的函数表达式）确保了所有的变量和函数都存在于自己的作用域内，不会污染全局空间。`"use strict";`语句启用严格模式，有助于避免一些常见的编程错误。 总的来说，这个基于...

    CSS_DIV设计模板

    - **下拉及多级弹出式菜单**：教程13和14深入讲解了下拉菜单的制作，包括多级弹出，这在大型网站中极为常见，提高用户的导航效率。 4. **网页标准版式布局**： - **div+css模板下载**：在“div+css网页标准版式...

    JavaScript网页特效范例宝典源码

    实例005 控制弹出窗口居中显示 7 实例006 弹出的窗口之Cookie控制 9 实例007 为弹出的窗口加入关闭按钮 11 实例008 关闭弹出窗口时刷新父窗口 12 实例009 关闭IE主窗口时，不弹出询问对话框 13 1.2 弹出网页对话框 ...

Magicbox
Global site tag (gtag.js) - Google Analytics