- 浏览: 529315 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (119)
- java总结 (43)
- Spring (2)
- 反编译工具 (1)
- hibernate (1)
- Tomcat (1)
- WebLogic (2)
- 随笔 (4)
- Word问题小记 (2)
- web前端 (26)
- Oracle (10)
- DOS (1)
- 面试笔试 (3)
- Servlet (1)
- jQuery (1)
- Linux/Unix (2)
- JSTL (1)
- struts2 (2)
- JSON (2)
- Velocity (0)
- 生活 (3)
- MyEclipse使用小结 (1)
- 操作系统 (2)
- jqgrid (1)
- ajax-dwr (1)
- javascript (18)
- dreamweaver (2)
- html (10)
- css (5)
- 正则表达式 (1)
- IO (3)
最新评论
-
a363722188:
幽默者 写道老兄,Collections.copy(dest1 ...
由java中深度复制一伸出Collections.copy的使用 -
幽默者:
老兄,Collections.copy(dest1, src1 ...
由java中深度复制一伸出Collections.copy的使用 -
raymao:
java 中 split 是正则表达式
java 和 javascript split 的区别! -
413899327:
面试前端javascript
阿里电话面试 -
yzsunlight:
你面试前台UI?
阿里电话面试
1、居中弹出层css控制问题版
2、弹出层高度居中
3、弹出层宽度居中
4、弹出层宽度和高度居中
5、对联应用,适用高度和宽度出现滚动条的情况
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>居中弹出层css控制问题版</title> <style type="text/css"> * {margin:0; padding:0;} body {height:3000px;width:3000px;} /* 如果不设置body属性 ,则就在页面中间 */ #div1 {position:absolute;top:50%;left:50%;width:400px;height:300px;background:#CCC; margin-left:-200px;margin-top:-150px;} </style> </head> <body> <div id="div1"></div> </body> </html>
2、弹出层高度居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>弹出层高度居中--ie/chrome下抖动</title> <style type="text/css"> * {margin:0; padding:0;} body {height:3000px;width:3000px;} #div1 {position:absolute; left:50%; width:400px; height:300px; background:#CCC; margin-left:-200px;} </style> <script> window.onload=window.onscroll=window.onresize=function () { //IE 6+,firefox 兼容 //document.documentElement.scrollTop //chrome //document.body.scrollTop 兼容 //document.title = document.documentElement.scrollTop + " , " + document.body.scrollTop; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; document.title = scrollTop; var oDiv=document.getElementById('div1'); var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; oDiv.style.top=scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2+'px'; }; </script> </head> <body> <div id="div1"></div> </body> </html>
3、弹出层宽度居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>弹出层宽度居中--ie/chrome下抖动</title> <style type="text/css"> * {margin:0; padding:0;} body {height:3000px;width:3000px;} #div1 {position:absolute; top:50%; width:400px; height:300px; background:#CCC; margin-top:-150px;} </style> <script> window.onload=window.onscroll=window.onresize=function () { //IE 6+,firefox 兼容 // document.documentElement.scrollLeft //chrome 兼容 //document.body.scrollLeft var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; document.title = scrollLeft; var oDiv=document.getElementById('div1'); var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft; oDiv.style.left=scrollLeft+(document.documentElement.clientWidth-oDiv.offsetWidth)/2+'px'; }; </script> </head> <body> <div id="div1"></div> </body> </html>
4、弹出层宽度和高度居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>弹出层宽度和高度居中--ie/chrome下抖动</title> <style type="text/css"> * {margin:0; padding:0;} body {height:3000px;width:3000px;} #div1 {position:absolute; width:400px; height:300px; background:#CCC; } </style> <script type="text/javascript"> window.onload=window.onscroll=window.onresize=function () { //IE 6+,firefox 兼容 //document.documentElement.scrollTop , document.documentElement.scrollLeft //chrome 兼容 //document.body.scrollTop , document.body.scrollLeft //document.title = document.documentElement.scrollTop + " , " + document.body.scrollTop; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; document.title = scrollLeft + " , " + scrollTop; var oDiv=document.getElementById('div1'); var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft; oDiv.style.top=scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2+'px'; oDiv.style.left=scrollLeft+(document.documentElement.clientWidth-oDiv.offsetWidth)/2+'px'; }; </script> </head> <body> <div id="div1"></div> </body> </html>
5、对联应用,适用高度和宽度出现滚动条的情况
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>IE6下抖动</title> <style> /* 此版本基本可以适用大多数要求,IE6下稍微的抖动是可以接受的,而且宽度一般不会有滚动条 除IE6下都可以满足也没需求 */ body {height:3000px;width:3000px;} #div1 { width:200px;height:200px;background:#CCC; position:fixed;/* FF Chrome IE7*/ _position:absolute;/*IE6*/ right:0; top:50%; margin-top:-100px;/*FF Chrome IE7 该值为本身高的一半*/ _margin-top:0;/* IE6下使用的是absolute 要清掉mragin-top的值,位置必须在原来margin-top 之后*/ } </style> <script> /* 判断是否是IE6,只有IE6才会执行此段代码,但是会出现抖动问题!一般可以满足所有要求了! */ if(window.navigator.userAgent.indexOf('MSIE 6')!=-1){ //IE6 window.onload=window.onscroll=window.onresize=function (){ var oDiv=document.getElementById('div1'); var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft; oDiv.style.top=scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2+'px'; /* 处理宽度有滚动条的情况,如果body 的宽度没出现滚动条,这段代码可以不要,这里只是以防万一 */ oDiv.style.left=scrollLeft+(document.documentElement.clientWidth-oDiv.offsetWidth)+'px'; }; } </script> </head> <body> <div id="div1"></div> </body> </html>
- 居中弹出层问题版.rar (2.8 KB)
- 下载次数: 3
- 对联应用.zip (1.1 KB)
- 下载次数: 3
发表评论
-
java 和 javascript split 的区别!
2013-09-18 10:52 1561java 和 javascript split 的区别! ... -
javascrip如何创建命名空间
2013-09-18 10:49 1149看代码,废话不多说! <!DOCTYPE ht ... -
阿里电话面试
2013-09-10 22:16 2455今天晚上接到阿里电话面试! 问到的问题大 ... -
setTimeout 和 setInterval最小执行时间问题
2013-09-08 22:43 16627setTimeout 和 setInterval 经常被用 ... -
IE6用setAttribute添加事件无效
2013-09-08 11:51 1381<!DOCTYPE html PUBLIC &q ... -
在IE6下 a标签添加行间onclick事件导致页面跳转失败原因分析
2013-09-08 11:43 3346<!DOCTYPE html PUBLIC & ... -
如何禁用浏览器的后退/刷新,backspace退格键
2013-06-09 13:01 7424在这个页面中加入的JavaScript代码可 用来产生点击前 ... -
javascript阻止事件冒泡和浏览器的默认行为
2013-06-09 09:41 2173在使用javascript编程时会遇到一个问题,就是当你给 ... -
JavaScript中两个等于号和三个等于号之间的区别
2013-06-07 14:59 1750为真的: 0 == 0 、"" == ... -
javascript中一些数据类型以及奇怪的特性
2013-06-07 14:24 1296javascript中一些数据类型以及奇怪的特性。具体情况直接 ... -
javascript中为5种为假的情况测试
2013-05-24 15:42 1235Javascript假的5种情况: Falsy values ... -
javascript中变量声明提升(Hoisting)的理解 ---What is hoisting in Javascript?
2013-05-24 11:24 1347<!DOCTYPE html PUBLIC &quo ... -
添加重置IE outline方法
2013-05-12 23:07 1737css / reset-ie-outline.css ... -
JavaScript中两个等于号和三个等于号之间的区别
2013-05-12 22:41 1147<!DOCTYPE html PUBLIC " ... -
光标充满整个input输入框的方法
2013-03-25 20:11 2719光标充满整个input输入框的方法: 1、不设置行高 --& ... -
javascript的函数参数arguments 并不是数组
2013-03-22 12:34 1444arguments 并不是数组,只是碰巧用数字做索引,以及一个 ... -
隐式块级元素
2013-02-25 14:56 974学无止境。 我自诩xhtml+css玩的炉火纯青,却发现, ... -
javascript中字符串格式json如何转化成json对象
2013-02-13 16:34 12098什么是JSON JSON(JavaScript Object ... -
dreamweaver js代码格式化
2013-02-13 13:33 8573官方提供的扩展 javascript source forma ... -
javascript 内存和性能闲聊
2013-01-14 22:25 1135我想问你这样更省内存,所有的aBtn[i].onclick共用 ...
相关推荐
NULL 博文链接:https://shoushounihao.iteye.com/blog/1955513
js弹出层居中可移动 js弹出层居中可移动
jQuery弹出层垂直居中效果 jQuery弹出层垂直居中效果 jQuery弹出层垂直居中效果 jQuery弹出层垂直居中效果
弹出层(遮罩层)弹出页面垂直居中,一个不错的例子,可拿来使用。
DIV始终居中的半透明弹出层.rarDIV始终居中的半透明弹出层.rarDIV始终居中的半透明弹出层.rar
此项目是在MVC5的框架里自己用Jquery写的一个弹出层居中,并显示半透明的遮罩,点击遮罩任意地方就隐藏弹出层
jquery实现让弹出层绝对居中。
1. 弹出绝对居中层 2. 企业级应用标准,支持SharePoint 3. 基于ASP.ENT, JavaScript, CSS开发
点击文字或按钮,弹出一个遮罩层并居中显示,单击其他地方,可以自动关闭遮罩层
jQuery点击遮罩弹出层固定居中代码是一款自适应的图片加文字遮罩弹窗代码,适用于手机端的网页遮罩弹出层代码。
DIV始终居中的半透明弹出层DIV始终居中的半透明弹出层
遮罩弹出层 ; charset=utf-8" /> <title>jquery弹出层鼠标点击弹出层可浮动在...弹出层当鼠标点击文字或图片弹出层,弹出层浮动在屏幕上可以随浏览器上下滚动,弹出层可自动居中在页面中间。jquery下载。" /> </head>
兼容ie,FF,chrome,opera的弹出层居中js。
网页上的点击弹出层代码,居中显示 点击弹出居中的遮罩层代码
jquery弹出层当鼠标点击文字或图片弹出层,弹出层浮动在屏幕上可以随浏览器上下滚动,弹出层可自动居中在页面中间
js+CSS实现弹出居中背景半透明div层的方法.docx
js弹出层绝对居中(ie,火狐都支持)在不同浏览器上显示效果一样