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 相关文章推荐
csdn 博客的css样式 v3
Feb 24 Javascript
基于JQuery的一句代码实现表格的简单筛选
Jul 26 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
Jul 03 Javascript
jquery计算鼠标和指定元素之间距离的方法
Jun 26 Javascript
JavaScript交换两个变量值的七种解决方案
Dec 01 Javascript
基于javascript实现最简单选项卡切换
Feb 01 Javascript
jquery实现下拉框左右选择功能
Feb 21 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
May 02 Javascript
JavaScript截屏功能的实现代码
Jul 28 Javascript
在Vue methods中调用filters里的过滤器实例
Aug 30 Javascript
VUE项目中加载已保存的笔记实例方法
Sep 14 Javascript
js实现图片无缝循环轮播
Oct 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和ACCESS写聊天室(八)
2006/10/09 PHP
PHP函数extension_loaded()用法实例
2015/01/19 PHP
PHP房贷计算器实例代码,等额本息,等额本金
2017/04/01 PHP
js 页面执行时间计算代码
2009/03/04 Javascript
基于Jquery与WebMethod投票功能实现代码
2011/01/19 Javascript
原生js实现给指定元素的后面追加内容
2013/04/10 Javascript
给事件响应函数传参数的四种方式小结
2013/12/05 Javascript
微信小程序之picker日期和时间选择器
2017/02/09 Javascript
jquery将标签元素的高设为屏幕的百分比
2017/04/19 jQuery
Webpack中publicPath路径问题详解
2018/05/03 Javascript
浅谈微信小程序flex布局基础
2018/09/10 Javascript
Vue.js更改调试地址端口号的实例
2018/09/19 Javascript
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
layui复选框限制选择个数的方法
2019/09/18 Javascript
简单实现节流函数和防抖函数过程解析
2019/10/08 Javascript
extjs图表绘制之条形图实现方法分析
2020/03/06 Javascript
react中hook介绍以及使用教程
2020/12/11 Javascript
微信小程序实现购物车小功能
2020/12/30 Javascript
python发布模块的步骤分享
2014/02/21 Python
Python面向对象编程中关于类和方法的学习笔记
2016/06/30 Python
用Python解决计数原理问题的方法
2016/08/04 Python
Python面向对象类继承和组合实例分析
2018/05/28 Python
python-opencv 将连续图片写成视频格式的方法
2019/01/08 Python
Python 实现OpenCV格式和PIL.Image格式互转
2020/01/09 Python
Python能做什么
2020/06/02 Python
opencv 形态学变换(开运算,闭运算,梯度运算)
2020/07/07 Python
Python过滤序列元素的方法
2020/07/31 Python
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
三星新西兰官网:Samsung新西兰
2019/03/05 全球购物
澳大利亚最受欢迎的超级商场每日优惠:Catch
2020/11/17 全球购物
Java方面的关于数组和继承的笔面试题
2015/09/18 面试题
《神奇的克隆》教学反思
2014/04/10 职场文书
法制宣传口号
2014/06/16 职场文书
幼儿园安全工作总结2015
2015/04/20 职场文书
高中家长意见怎么写
2015/06/03 职场文书
堂吉诃德读书笔记
2015/06/30 职场文书