本文为大家详细介绍下使用js实现遮罩弹出层居中，且随浏览器窗口滚动条滚动，示例代码如下，感兴趣的朋友可以参考下，

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

下面看看我的原始代码：

  1. <!doctype html>
  2.  
  3. <head>
  4. <meta charset="utf-8" />
  5. <title></title>
  6. <style type="text/css">
  7. * {
  8.     margin:0;
  9.     padding:0;
  10. }
  11. html {
  12.     _background:url(about:blank);
  13. } /** 阻止闪动 in IE6 , 把空文件换成about:blank , 减少请求 */
  14. body {
  15.     background:#fff;
  16.     font: 12px/1.5 Tahoma, Geneva, \\5b8b\\4f53, sans-serif;
  17.     height:100%;
  18. }
  19.  
  20. .img_zfb{
  21.     width:100%;
  22.     height:100%;
  23. }
  24. .mid {
  25.     font-size:12px;
  26.     text-align:center;
  27.     line-height:24px;
  28. }
  29. /** 遮罩层 **/
  30. #div_masklayer {
  31.     background:#000;
  32.     display:none;
  33.     filter:alpha(opacity = 50);
  34.     opacity:0.5;
  35.     top:0;
  36.     left:0;
  37.     height:100%;
  38.     width:100%;
  39.     z-index:999;
  40.     position:fixed;
  41.     _position:absolute;
  42. _left: expression(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth);
  43. _top: expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight);
  44. }
  45. /** 弹出层 **/
  46. #div_popup {
  47.     display:none;
  48.     width:240px;
  49.     z-index:1000;
  50.     left:50%;
  51.     top:50%;
  52.     position:fixed!important;
  53.     /*margin-left:-120px !important;*/
  54.     _position:absolute;
  55. _top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat')? documentElement.scrollTop + (document.documentElement.clientHeight - this.offsetHeight)/2: /** IE6 */
  56. document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2); /* IE5 IE5.5*/
  57. }
  58. .content {
  59.     background:#f3f3f3;
  60.     border:1px solid #999;
  61. }
  62. .content h3 {
  63.     background:#a0a0a0;
  64.     color:#fff;
  65.     font-size:14px;
  66.     height:32px;
  67.     line-height:32px;
  68.     padding-left:5px;
  69. }
  70.  
  71. </style>
  72. </head>
  73. <body>
  74. <div class="wrap">
  75.   <p> 我是正文我是正文我是正文我是正文我是正文我是正文我是正文 <br />
  76.     我是正文我是正文我是正文我是正文我是正文我是正文我是正文 <br />
  77.     我是正文我是正文我是正文我是正文我是正文我是正文我是正文 <br />
  78.     我是正文我是正文我是正文我是正文我是正文我是正文我是正文 <br />
  79.     我是正文我是正文我是正文我是正文我是正文我是正文我是正文 </p>
  80.     <br /><br /><br /><br /><br /><br /><br />
  81.     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  82.     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  83.   <input type="button" id="btn_test" value="clike me" />
  84.     <br /><br /><br /><br /><br />
  85.   <div style="width:60px; height:900px; display:block; position:absolute; left:40px; background:red;"> </div>
  86. </div>
  87. <div id="div_masklayer"></div>
  88. <div id="div_popup">
  89.   <div class="content">
  90.     <h3>我是弹出层 有没有居中？</h3>
  91.     <img class="img_zfb" id="img_zfb" src="http://images.cnblogs.com/cnblogs_com/mq0036/508398/o_12.png">
  92.     <p class="mid">居中居中居中居中居中居中</p>
  93.     <p class="mid">居中居中居中居中居中居中</p>
  94.     <p>居中居中居中</p>
  95.   </div>
  96. </div>
  97. <script type="text/javascript"> 
  98.  
  99. (function ()
  100. {
  101.     var btnclick = document.getElementById('btn_test');
  102.     var divmasklayer = document.getElementById('div_masklayer');
  103.     var divpoppu = document.getElementById('div_popup');
  104.  
  105.     btnclick.onclick = function ()
  106.     {
  107.         var popup = document.getElementById('div_popup');
  108.         var divmasklayer = document.getElementById('div_masklayer');
  109.         divmasklayer.style.display = 'block';
  110.         popup.style.display = 'block';
  111.         //var h = popup.clientHeight;
  112.         var h = popup.Height;
  113.         with(popup.style)
  114.         {
  115.             popup.style.marginLeft = -popup.clientWidth / 2 + 'px';
  116.             popup.style.marginTop = -popup.clientHeight / 2 + 'px';
  117.         }
  118.     }
  119.  
  120.     divmasklayer.onclick=function(){
  121.         document.getElementById('div_popup').style.display="none";
  122.         document.getElementById('div_masklayer').style.display="none";
  123.     }
  124. })();
  125.  
  126. </script>
  127. </body>
  128. </html>

参考出处：http://www.jb51.net/article/44354.htm

js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)的更多相关文章

  1. bootstrap 模态框中弹出层 input不能获得焦点且不可编辑

    bootstrap 模态框中弹出层 input不能获得焦点且不可编辑 问题描述:bs框架支持一层model层的情况下,在模态框中弹出了自定义的弹出层.发现自定义弹出层的输入框不能获得焦点且不可编辑. ...

  2. js动态加载js css文件,可以配置文件后辍，防止浏览器缓存

    js的引用,在浏览器,或微信上访问经常会遇到文件改了,但就是没有更新的问题,使用此函数可以轻松解决缓存问题只需要把js的引用方式改为使用此函数加载即可 源码如下: /** * js动态加载js css ...

  3. 页面加载异常 清除浏览器静态文件 js css 缓存 js动态加载js css文件,可以配置文件后辍，防止浏览器缓存

    js清除浏览器缓存的几种方法 - 兔老霸夏 - 博客园 https://www.cnblogs.com/Mr-Rocker/p/6031096.html js清除浏览器缓存的几种方法   一.CSS和 ...

  4. 原生JS获取各种高度宽度、浏览器窗口滚动条的位置、元素的几何尺寸名

    1)关于 pageX, clienX,offsetX,layerX pageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化 clientX:鼠标在页面上可视区域的位 ...

  5. layui中弹出层的两种表达方式

    方式一: 定义js中定义html变量 方式二: 设置div :hidden:hidden 布局 数据表格自适应大小: 代码: <style> .btn-container { margin ...

  6. div样式position：fixed,不随屏幕滚动而滚动，导致屏幕太小时弹出层被遮挡，无法滚动查看的解决办法

    window.onscroll = function () { var sl = -Math.max(document.body.scrollTop, document.documentElement ...

  7. JS只弹出一个居中弹出窗口

    var newWindow;//定义一个窗口,有利于窗口间的通讯function makeNewWindow(url) {   if (!newWindow || newWindow.closed) ...

  8. 转 js一个简单实用的弹出层

      关闭 点击查看 >> <html> <head> <title>新文件标题</title> <script type=" ...

  9. js实现遮罩以及弹出可移动登录窗口

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 【转载】User notification 的实现方法

    原帖请看:http://cocoathings.blogspot.com/2013/01/introduction-to-user-notifications-in.html 想要实现如图这样的not ...

  2. JDK__下载地址

    1. http://www.oracle.com/technetwork/java/archive-139210.html ZC: 貌似 从JDK7开始,有for ARM的版本,类似 : “Linux ...

  3. C++（二十三） — 内存泄漏及指针悬挂

    1.内存泄漏 动态申请的内存空间没有正常释放,但也不能继续使用. ; pch1 = new char('A'); // 此处申请的空间未被释放. char *pch2 = new char; pch1 ...

  4. 【Python】UnicodeEncodeError: 'ascii' codec can't encode characters in position 0-3

    问题如下: UnicodeEncodeError: 'ascii' codec can't encode characters in position 0-3 解决方法: 程序开始加上下面两句 sys ...

  5. webpack打包图片资源找不到问题

    当我们进行前端打包时,需改成如下配置: 往常这样打包是没有问题的,可是今天进行项目打包的时候缺报图片找不到的错误,如图所示: 头部组件的图片资源找不到错误,后台发现因为头部组件的背景图片size过大, ...

  6. 本地动态SQL

    (转自:http://blog.itpub.net/26622598/viewspace-718134) 一.什么是动态SQL 大多数PL/SQL都做着一件特殊的结果可预知的工作.例如,一个存储过程可 ...

  7. 【PL/SQL编程】注释说明

    1. 单行注释 由两个连接字符“--”开始,后面紧跟着注释内容. 2. 多行注释 由/*开头, 由*/结尾.

  8. boost库做什么用呢？

    1.C++标准库不是已经很全面了吗?Boost又不是界面库,它主要解决些什么问题呢?哪类问题?2.Boost的开发人员都是C++标准委员会的吧,为什么没把它列做标准库,有什么不完善的问题吗? 3.Bo ...

  9. hihocoder-1483区间价值 (二分+尺取法)

    题目链接: 区间价值 给定n个数A1...An,小Ho想了解AL..AR中有多少对元素值相同.小Ho把这个数目定义为区间[L,R]的价值,用v[L,R]表示. 例如1 1 1 2 2这五个数所组成的区 ...

  10. 9.详解引擎(InnoDB,MyISAM)的内存优化攻略?

    整理自互联网!! 本篇我们讲解内存优化. 注意:以下都是在MySQL目录下的my.ini文件中改写. 一.InnoDB内存优化 InnoDB用一块内存区域做I/O缓存池,该缓存池不仅用来缓存InnoD ...