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 相关文章推荐
用javascript操作xml
Nov 04 Javascript
javascript 检测浏览器类型和版本的代码
Sep 15 Javascript
为jQuery增加join方法的实现代码
Nov 28 Javascript
jQuery+PHP打造滑动开关效果
Dec 16 Javascript
javascript的日期对象、数组对象、二维数组使用说明
Dec 22 Javascript
js实现简洁大方的二级下拉菜单效果代码
Sep 01 Javascript
基于javascript实现彩票随机数生成(升级版)
Apr 17 Javascript
js 判断数据类型的几种方法
Jan 13 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
Mar 10 Javascript
利用vue + element实现表格分页和前端搜索的方法
Dec 25 Javascript
如何理解Vue的v-model指令的使用方法
Jul 19 Javascript
layui点击数据表格添加或删除一行的例子
Sep 12 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
phpexcel导入excel数据使用方法实例
2013/12/24 PHP
分享下页面关键字抓取components.arrow.com站点代码
2014/01/30 PHP
Yii2中datetime类的使用
2016/12/17 PHP
php闭包中使用use声明变量的作用域实例分析
2018/08/09 PHP
Maps Javascript
2007/01/22 Javascript
js DOM模型操作
2009/12/28 Javascript
zTree插件之单选下拉菜单实例代码
2013/11/07 Javascript
Shell脚本实现Linux系统和进程资源监控
2015/03/05 Javascript
简单谈谈javascript中的变量、作用域和内存问题
2015/08/30 Javascript
浅谈javascript中的加减时间
2016/07/12 Javascript
JavaScript Ajax实现异步通信
2016/12/14 Javascript
解决JQuery全选/反选第二次失效的问题
2017/10/11 jQuery
nodejs中安装ghost出错的原因及解决方法
2017/10/23 NodeJs
关于Vue组件库开发详析
2018/07/01 Javascript
node中IO以及定时器优先级详解
2019/05/10 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
2020/02/12 Javascript
python 生成不重复的随机数的代码
2011/05/15 Python
Python批量提取PDF文件中文本的脚本
2018/03/14 Python
Python 网络爬虫--关于简单的模拟登录实例讲解
2018/06/01 Python
python实现人民币大写转换
2018/06/20 Python
Python字符串、整数、和浮点型数相互转换实例
2018/08/04 Python
Python多进程入门、分布式进程数据共享实例详解
2019/06/03 Python
django框架两个使用模板实例
2019/12/11 Python
pytorch sampler对数据进行采样的实现
2019/12/31 Python
配置python的编程环境之Anaconda + VSCode的教程
2020/03/29 Python
Python使用monkey.patch_all()解决协程阻塞问题
2020/04/15 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
基于selenium及python实现下拉选项定位select
2020/07/22 Python
基于python模拟TCP3次握手连接及发送数据
2020/11/06 Python
文艺晚会主持词
2014/03/24 职场文书
团委书记的竞聘演讲稿
2014/04/24 职场文书
小学生校园广播稿
2014/09/28 职场文书
出差报告怎么写
2014/11/06 职场文书
七年级思品教学反思
2016/02/20 职场文书
Vue3.0写自定义指令的简单步骤记录
2021/06/27 Vue.js
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
2022/12/24 HTML / CSS