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 相关文章推荐
jQuery 操作下拉列表框实现代码
Feb 22 Javascript
修改好的jquery滚动字幕效果实现代码
Jun 22 Javascript
Jquery插件编写简明教程
Mar 25 Javascript
JavaScript 对象详细整理总结
Sep 29 Javascript
jquery checkbox的相关操作总结
Oct 17 Javascript
Vue 2中ref属性的使用方法及注意事项
Jun 12 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
Mar 09 Javascript
angularjs 缓存的使用详解
Mar 19 Javascript
js实现二级菜单点击显示当前内容效果
Apr 28 Javascript
Angular4 组件通讯方法大全(推荐)
Jul 12 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
Nov 08 Javascript
详解Vue 换肤方案验证
Aug 28 Javascript
按下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制作新闻系统的思路
2006/10/09 PHP
在Mac OS上自行编译安装Apache服务器和PHP解释器
2015/12/24 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
浅谈PHP5.6 与 PHP7.0 区别
2019/10/09 PHP
document.compatMode介绍
2009/05/21 Javascript
使用Javascript接收get传递的值的代码
2011/11/30 Javascript
jQuery插件分享之分页插件jqPagination
2014/06/06 Javascript
Underscore.js常用方法总结
2015/02/28 Javascript
JavaScript原生对象之String对象的属性和方法详解
2015/03/13 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
2015/11/26 Javascript
jQuery使用getJSON方法获取json数据完整示例
2016/09/13 Javascript
浅谈Vue.js中的v-on(事件处理)
2017/09/05 Javascript
微信小程序中setInterval的使用方法
2017/09/29 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
2018/04/26 jQuery
Vue中错误图片的处理的实现代码
2019/11/07 Javascript
JS通用方法触发点击事件代码实例
2020/02/17 Javascript
使用Python生成随机密码的示例分享
2016/02/18 Python
Python中Iterator迭代器的使用杂谈
2016/06/20 Python
python中virtualenvwrapper安装与使用
2018/05/20 Python
浅谈Python2、Python3相对路径、绝对路径导入方法
2018/06/22 Python
关于pytorch多GPU训练实例与性能对比分析
2019/08/19 Python
python词云库wordCloud使用方法详解(解决中文乱码)
2020/02/17 Python
keras 模型参数,模型保存,中间结果输出操作
2020/07/06 Python
Python爬虫之App爬虫视频下载的实现
2020/12/08 Python
潘多拉意大利官方网上商城:网上选购PANDORA珠宝
2018/10/07 全球购物
用友笔试题目
2016/10/25 面试题
数据库测试通常都包括哪些方面
2015/11/30 面试题
医院护士专业个人的求职信
2013/12/09 职场文书
个人素质的自我评价分享
2013/12/16 职场文书
老总助理工作岗位职责
2014/02/06 职场文书
小学优秀教师先进事迹材料
2014/12/16 职场文书
会议邀请函
2015/01/30 职场文书
2015年班组工作总结
2015/04/20 职场文书
在职证明书模板
2015/06/15 职场文书
Python 使用dict实现switch的操作
2021/04/07 Python
Vue过滤器(filter)实现及应用场景详解
2021/06/15 Vue.js