js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
本文为大家详细介绍下使用js实现遮罩弹出层居中,且随浏览器窗口滚动条滚动,示例代码如下,感兴趣的朋友可以参考下,
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%;
} .img_zfb{
width:100%;
height:100%;
}
.mid {
font-size:12px;
text-align:center;
line-height:24px;
}
/** 遮罩层 **/
#div_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);
}
/** 弹出层 **/
#div_popup {
display:none;
width:240px;
z-index:1000;
left:50%;
top:50%;
position:fixed!important;
/*margin-left:-120px !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;
} </style>
</head>
<body>
<div class="wrap">
<p> 我是正文我是正文我是正文我是正文我是正文我是正文我是正文 <br />
我是正文我是正文我是正文我是正文我是正文我是正文我是正文 <br />
我是正文我是正文我是正文我是正文我是正文我是正文我是正文 <br />
我是正文我是正文我是正文我是正文我是正文我是正文我是正文 <br />
我是正文我是正文我是正文我是正文我是正文我是正文我是正文 </p>
<br /><br /><br /><br /><br /><br /><br />
<input type="button" id="btn_test" value="clike me" />
<br /><br /><br /><br /><br />
<div style="width:60px; height:900px; display:block; position:absolute; left:40px; background:red;"> </div>
</div>
<div id="div_masklayer"></div>
<div id="div_popup">
<div class="content">
<h3>我是弹出层 有没有居中?</h3>
<img class="img_zfb" id="img_zfb" src="http://images.cnblogs.com/cnblogs_com/mq0036/508398/o_12.png">
<p class="mid">居中居中居中居中居中居中</p>
<p class="mid">居中居中居中居中居中居中</p>
<p>居中居中居中</p>
</div>
</div>
<script type="text/javascript"> (function ()
{
var btnclick = document.getElementById('btn_test');
var divmasklayer = document.getElementById('div_masklayer');
var divpoppu = document.getElementById('div_popup'); btnclick.onclick = function ()
{
var popup = document.getElementById('div_popup');
var divmasklayer = document.getElementById('div_masklayer');
divmasklayer.style.display = 'block';
popup.style.display = 'block';
//var h = popup.clientHeight;
var h = popup.Height;
with(popup.style)
{
popup.style.marginLeft = -popup.clientWidth / 2 + 'px';
popup.style.marginTop = -popup.clientHeight / 2 + 'px';
}
} divmasklayer.onclick=function(){
document.getElementById('div_popup').style.display="none";
document.getElementById('div_masklayer').style.display="none";
}
})(); </script>
</body>
</html>
参考出处:http://www.jb51.net/article/44354.htm
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)的更多相关文章
- bootstrap 模态框中弹出层 input不能获得焦点且不可编辑
bootstrap 模态框中弹出层 input不能获得焦点且不可编辑 问题描述:bs框架支持一层model层的情况下,在模态框中弹出了自定义的弹出层.发现自定义弹出层的输入框不能获得焦点且不可编辑. ...
- js动态加载js css文件,可以配置文件后辍,防止浏览器缓存
js的引用,在浏览器,或微信上访问经常会遇到文件改了,但就是没有更新的问题,使用此函数可以轻松解决缓存问题只需要把js的引用方式改为使用此函数加载即可 源码如下: /** * js动态加载js css ...
- 页面加载异常 清除浏览器静态文件 js css 缓存 js动态加载js css文件,可以配置文件后辍,防止浏览器缓存
js清除浏览器缓存的几种方法 - 兔老霸夏 - 博客园 https://www.cnblogs.com/Mr-Rocker/p/6031096.html js清除浏览器缓存的几种方法 一.CSS和 ...
- 原生JS获取各种高度宽度、浏览器窗口滚动条的位置、元素的几何尺寸名
1)关于 pageX, clienX,offsetX,layerX pageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化 clientX:鼠标在页面上可视区域的位 ...
- layui中弹出层的两种表达方式
方式一: 定义js中定义html变量 方式二: 设置div :hidden:hidden 布局 数据表格自适应大小: 代码: <style> .btn-container { margin ...
- div样式position:fixed,不随屏幕滚动而滚动,导致屏幕太小时弹出层被遮挡,无法滚动查看的解决办法
window.onscroll = function () { var sl = -Math.max(document.body.scrollTop, document.documentElement ...
- JS只弹出一个居中弹出窗口
var newWindow;//定义一个窗口,有利于窗口间的通讯function makeNewWindow(url) { if (!newWindow || newWindow.closed) ...
- 转 js一个简单实用的弹出层
关闭 点击查看 >> <html> <head> <title>新文件标题</title> <script type=" ...
- js实现遮罩以及弹出可移动登录窗口
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 总结一下TODO的用法
1.设置任务的标签 WINDOW->preference->java->complier->task tags加一个 DONE:NORMAL表示已经完成的任务2. java ...
- 华为交换机S5700系列配置镜像端口(M:N)
配置本地端口镜像组网图(M:N) 组网需求 如图所示,某公司研发一部.研发二部和市场部通过Switch与外部Internet通信,监控设备Server1.Server2与Switch直连. 现在希望将 ...
- MongoDB快速入门(十二) -- 索引
MongoDB 索引 索引支持的解析度的查询效率.如果没有索引,MongoDB必须扫描每一个文档的集合,要选择那些文档相匹配的查询语句.这种扫描的效率非常低,会要求 mongod 做大数据量的处理. ...
- .NET Framework(CLI,CLS,CTS,CLR,FCL,BCL)
最下层蓝色部分是.NET Framework的基础,也是所有应用软件的基础..NET Framework不是凭空出来的,实际上API,COM+,和一些相关驱动依然是它的基石..NET Framewor ...
- Linux平台下Oracle定时备份数据
临时收到一个任务,就是在生产环境上定时备份oracle的数据.空闲时间搞了一下,真是一波三折,过程有点小郁闷,结果哈哈.现在进行总结一下 (1)新建一个shell脚本test.sh #!/bin/ba ...
- Java_WebKit_ZC01
1. 1.1. F:\ZC_chrome_download\java_svg\__Java_call_Qt\qtjambi-master\doc\src\snippets\application.xm ...
- Samba的安装配置使用
////////////////////////////////Samba//////////////////////////////////////////// 小常识:在同一局域网中,两个系统的工 ...
- python标准日志模块logging使用
python的标准库里的日志系统从Python2.3开始支持.只要import logging这个模块即可使用.如果你想开发一个日志系统, 既要把日志输出到控制台, 还要写入日志文件,只要这样使用: ...
- python+mitmproxy抓包过滤+redis消息订阅+websocket实时消息发送,日志实时输出到web界面
本实例实现需求 在游戏SDK测试中,经常需要测试游戏中SDK的埋点日志是否接入正确.本实例通过抓包(客户端http/https 请求)来判定埋点日志是是否接入正确. 实现细节:使用django项目,后 ...
- st表模板
http://blog.csdn.net/insistgogo/article/details/9929103 这篇博客讲解的很详细了,求区间最大值也可以用st表,时间复杂度O(n log(n)),查 ...