JS弹出居中的DIV的代码

news/2024/10/3 5:18:24 标签: div, 浏览器, generator, function, table, html
<html" title=div>div id="article_content" class="article_content clearfix"> <html" title=div>div id="content_views" class="htmledit_views">   <html" title=div>div id="art_demo"> 一直都在想怎么样使弹出的DIV能在任何时候都是居中显示的,刚开始的时候是用CSS样式直接定义好层的位置,但是当页面很长的时候,或是html" title=浏览器>浏览器窗口大小不是固定的时候就不能正确的显示,所以只好用JS来控制DIV的显示位置。 html" title=div>div> <html" title=div>div id="con_all"> <html" title=div>div id="con_da1"> <script src="http://img.jb51.net/imgby/baidu336.js" type="text/javascript"></script> html" title=div>div> <html" title=div>div id="con_da8"> <script src="http://img.jb51.net/imgby/baidu234.js" type="text/javascript"></script> html" title=div>div> html" title=div>div>

首先再次详细解释一下JS中窗口和网页的几种尺寸属性的含义
document.body.clientWidth(网页可见区域宽):是指html" title=浏览器>浏览器显示网页的区域宽度,不包括html" title=浏览器>浏览器的边框宽度和垂直滚动条的宽度。大小随着html" title=浏览器>浏览器的窗口大小而改变。
document.body.clientHeight(网页可见区域高):是指html" title=浏览器>浏览器显示网页的区域所能看到的高度,不包括html" title=浏览器>浏览器的边框宽度和水平滚动条的高度。大小随着html" title=浏览器>浏览器的窗口大小而改变。
document.body.scrollTop(网页被卷去的高):是指拉动垂直滚动条时网页上面被地址栏及菜单栏遮盖着的部分的高。
document.body.scrollLeft(网页被卷去的左):是指拉动水平滚动条时网页左面被左边线遮盖着的部分的宽。
现在我们来分析一下程序该如何实现:
第一步我们要实现的是使层在弹出时绝对居中不去考虑是否有滚动条的情况。
1.计算出层距离显示区域左边和上边的位置
注意:html" title=div>divId指的是所要居中的层,html" title=div>divId.clientWidth为其宽度!@
var html" title=div>divId = document.getElementById("xxx");
var v_left=(document.body.clientWidth-html" title=div>divId.clientWidth)/2;
var v_top=(document.body.clientHeight-html" title=div>divId.clientHeight)/2;
2.把得到的值重新赋给DIV的left和top属性
html" title=div>divId.style.left=v_left;
html" title=div>divId.style.top=v_top;
说明:html" title=div>divId为DIV标签的id值
这样这个层就是居中显示的了。
第二步我们要实现的是使在拖动滚动条的情况下弹出的层也能居中。
其实很简单我们只要把拖动的宽度和高度加到前面计算出来的左边距和上边距中就OK 了。
v_left+=document.body.scrollLeft;
v_top+=document.body.scrollTop;
2.把得到的值重新赋给DIV的left和top属性
html" title=div>divId.style.left=v_left;
html" title=div>divId.style.top=v_top;
这样显示出来就是居中的了。
完整代码如下:

<html" title=div>div class="htmlarea"> 点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行] html" title=div>div>


如 果你想在拖动滚动条或是窗口重置大小时,层也能居中显示的话,可以在body的属性里面加上οnresize="html" title=div>divcenter();"和 οnscrοll="html" title=div>divcenter();"就OK了,不过可能显示的效果不是很好,特别是在拖动滚动条时的效果可能是一擅一擅的,忒不爽。

html" title=div>div> html" title=div>div> <html" title=div>div id="treeSkill">html" title=div>div>

http://www.niftyadmin.cn/n/590043.html

相关文章

一文看尽 Build 2019 与 I/O 2019A

上周微软 Build 2019 大会与谷歌 I/O 2019 大会相继举办&#xff0c;两场开发者大会让人热血沸腾&#xff0c;期间两位巨头宣布了各种劲爆的消息&#xff0c;OSCHINA 对其中一些与开发者特别相关的内容进行了报导。 两场会议都已经落幕&#xff0c;这里汇总一下我们报导过的内…

Library not loaded: /System/Library/Frameworks/LocalAuthentication.framework

工程最低支持7.0&#xff0c;一般都是8和9系统&#xff0c;偶尔一天碰到到老古董机&#xff0c;运行就闪退&#xff0c; 提示&#xff1a;dyld: Library not loaded: /System/Library/Frameworks/LocalAuthentication.framework/LocalAuthentication Referenced from: /var/mob…

OpenGLES与OpenGL的区别

https://blog.csdn.net/dongtinghong/article/details/62299668

来一次有侧重点的区分Swift与Objective-C

[TOC] (swift)[温故而知新] 面试中经常被问到Objective-C与Swift的区别&#xff0c;其实区别还是很多的&#xff0c;重点整理一下个人觉得很重要的&#xff1a;面向协议编程。 一、Objective-C与Swift的异同 1.1、swift和OC的共同点&#xff1a; – OC出现过的绝大多数概念&a…

解决could not find developer disk image问题

真机调试没有9.2&#xff0c;报错could not find developer disk image问题&#xff1b; 下载9.2 (13C70)、9.2 (13C75)放到xcode程序包的指定目录 Contents/Developer/Platforms/iPhoneOS.platform/DeviceSupport 重启xcode即可&#xff1b; 下载地址&#xff1a;http://downl…

经典游戏服务器端架构概述 (1)

https://blog.csdn.net/mergerly/article/details/77985141

MyLayoutTangramKit 的重大升级!

MyLayout和TangramKit是一套基于frame之上的UI界面布局库的OC版本和Swift版本。目前最新版本升级为MyLayout1.7.0和TangramKit1.4.0。 OC1.7.0: github.com/youngsoft/M… Swift1.4.0: github.com/youngsoft/T… 这次升级的主要目的是为了和AutoLayout结合的更加紧密。 这不…

C++11 新特性:显式 override 和 final

https://www.devbean.net/2012/05/cpp11-override-final/