js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)


Posted in Javascript onDecember 11, 2013

js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)

<!doctype html> 
<head> 
<meta charset="utf-8" /> 
<title></title> 
<style type="text/css"> 
*{}{margin:0;padding:0;} 
html{}{_background:url(about:blank);} /**//* 阻止闪动 in IE6 , 把空文件换成about:blank , 减少请求 */ 
body{}{background:#fff; font: 12px/1.5 Tahoma,Geneva, \\5b8b\\4f53, sans-serif; height:100%;} 
.wrap{}{height:980px; padding-top:20px;text-align:center;} 
p{}{font-size:14px;text-align:center;line-height:24px;} 
/**//** 遮罩层 **/ 
#masklayer{}{ 
background:#000; 
display:none; 
filter:alpha(opacity = 50); 
opacity:0.5; 
top:0; 
left:0; 
height:100%; 
width:100%; 
z-index:999; 
position:fixed; 
_position:absolute; 
_left: expression(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth); 
_top: expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight); 
} 
/**//** 弹出层 **/ 
#popup{}{ 
display:none; 
width:300px; 
z-index:1000; 
left:50%; 
top:50%; 
position:fixed!important; 
margin-left:-150px !important; 
_position:absolute; 
_top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat')? 
documentElement.scrollTop + (document.documentElement.clientHeight - this.offsetHeight)/2: /**//*IE6*/ 
document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2); /**//*IE5 IE5.5*/ 
} 
.content{}{background:#f3f3f3;border:1px solid #999;} 
.content h3{}{background:#a0a0a0;color:#fff;font-size:14px;height:32px;line-height:32px; padding-left:5px;} 
#clickbtn{}{margin-top:20px;} 
</style> 
</head> 
<body> 
<div class="wrap"> 
<p> 
我是正文我是正文我是正文我是正文我是正文我是正文我是正文 
<br /> 
我是正文我是正文我是正文我是正文我是正文我是正文我是正文 
<br /> 
我是正文我是正文我是正文我是正文我是正文我是正文我是正文 
<br /> 
我是正文我是正文我是正文我是正文我是正文我是正文我是正文 
<br /> 
我是正文我是正文我是正文我是正文我是正文我是正文我是正文 
</p> 
<input type="button" id="clickbtn" value="clike me" /> 
</div> 
<div id="masklayer"></div> 
<div id="popup"> 
<div class="content"> 
<h3>我是弹出层 有没有居中?</h3> 
<p>居中居中居中居中居中居中</p> 
<p>居中居中居中居中居中</p> 
<p>居中居中居中居中</p> 
<p>居中居中居中</p> 
</div> 
</div> 
<script type="text/javascript"> 
(function(masklayer){ 
var clickbtn = document.getElementById('clickbtn'); 
clickbtn.onclick = function(){ 
var popup = document.getElementById('popup'); 
masklayer.style.display='block'; 
popup.style.display ='block'; 
var h = popup.clientHeight; 
with(popup.style){ 
marginTop = -h/2+'px'; 
} 
} 
})(document.getElementById('masklayer')) 
</script> 
</body> </html>
Javascript 相关文章推荐
点击显示指定元素隐藏其他同辈元素的方法
Feb 19 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
Nov 30 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
Jul 09 Javascript
JS实现图片剪裁并预览效果
Aug 12 Javascript
Angular JS 生成动态二维码的方法
Feb 23 Javascript
canvas红包照片实例分享
Feb 28 Javascript
微信小程序 后台登录(非微信账号)实例详解
Mar 31 Javascript
JS获取子、父、兄节点方法小结
Aug 14 Javascript
基于vue开发的在线付费课程应用过程
Jan 25 Javascript
vue项目中axios使用详解
Feb 07 Javascript
vue element table 表格请求后台排序的方法
Sep 28 Javascript
jQuery实现倒计时功能完整示例
Jun 01 jQuery
按下Enter焦点移至下一个控件的实现js代码
Dec 11 #Javascript
JS中window.open全屏命令解析及使用示例
Dec 11 #Javascript
js的匿名函数使用介绍
Dec 11 #Javascript
jquery ajax jsonp跨域调用实例代码
Dec 11 #Javascript
JavaScript Math.ceil() 函数使用介绍
Dec 11 #Javascript
Javascript实现返回上一页面并刷新的小例子
Dec 11 #Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
Dec 11 #Javascript
You might like
PHP删除数组中的特定元素的代码
2012/06/28 PHP
Thinkphp搭建包括JS多语言的多语言项目实现方法
2014/11/24 PHP
javascript new后的constructor属性
2010/08/05 Javascript
Javascript图像处理—平滑处理实现原理
2012/12/28 Javascript
node.js中的fs.ftruncate方法使用说明
2014/12/15 Javascript
js+css实现导航效果实例
2015/02/10 Javascript
js性能优化技巧
2015/11/29 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
2016/05/12 Javascript
NodeJS基础API搭建服务器详细过程记录
2017/04/01 NodeJs
angularjs $http实现form表单提交示例
2017/06/09 Javascript
jQuery操作事件完整实例分析
2020/01/10 jQuery
Vue数字输入框组件示例代码详解
2020/01/15 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
2020/06/11 Javascript
[46:09]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第三场
2014/05/26 DOTA
[46:48]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第三局
2016/02/25 DOTA
[44:30]完美世界DOTA2联赛PWL S2 GXR vs Magma 第一场 11.25
2020/11/26 DOTA
python转换摩斯密码示例
2014/02/16 Python
python 实现一个贴吧图片爬虫的示例
2017/10/12 Python
django 中QuerySet特性功能详解
2019/07/25 Python
python标准库OS模块函数列表与实例全解
2020/03/10 Python
python制作一个简单的gui 数据库查询界面
2020/11/19 Python
Python django框架 web端视频加密的实例详解
2020/11/20 Python
Python爬虫之App爬虫视频下载的实现
2020/12/08 Python
翻新二手苹果产品的网络领导者:Mac of all Trades
2017/12/19 全球购物
泰国折扣酒店预订:Hotels2Thailand
2018/03/20 全球购物
与世界上最好的跑步专业品牌合作:Fleet Feet
2019/03/22 全球购物
垃圾回收的优点和原理。并考虑2种回收机制
2016/10/16 面试题
最新大学毕业求职简历的自我评价
2013/10/18 职场文书
毕业生个人求职信范例分享
2013/12/17 职场文书
求职信标题怎么写
2014/05/26 职场文书
乡镇创先争优活动总结
2014/08/28 职场文书
学雷锋主题班会教案
2015/08/13 职场文书
为什么 Nginx 比 Apache 更牛逼
2021/03/31 Servers
动画电影《龙珠超 超级英雄》延期上映
2022/03/20 日漫
Python学习之os包使用教程详解
2022/03/21 Python
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android