本文为大家详细介绍下使用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 />

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

  <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 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)的更多相关文章

  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. FAQ | 是什么导致MySQL数据库服务器磁盘I/O高（本文章来自知数堂）

    FAQ | 是什么导致MySQL数据库服务器磁盘I/O高 2016-12-26 叶金荣 老叶茶馆 0.导读 有个MySQL服务器的磁盘I/O总有过高报警,怎么回事? 本文约1500字,阅读时间约10分 ...

  2. 如何自定义echarts 线性图的选择事件

    最近在做公司的数据大盘,要用到图表显示,echarts研二的时候有用过,我就决定用它了. 这里用到一个可以同时显示多条曲线的line-charts,基本样子如下: 看到这个画红色圈圈的地方了吗??? ...

  3. java中最常用jar包的用途

    jar包用途 axis.jarSOAP引擎包commons-discovery-0.2.jar用来发现.查找和实现可插入式接口,提供一些一般类实例化.单件的生命周期管理的常用方法.jaxrpc.jar ...

  4. Mybatis映射配置文件<select>的学习

    resultMap的使用 当查询的表的列名与实体类的属性名不同时,有三种方式来处理: 1.使用SQL的别名 如:select user_name userName from user 2.如果符合驼峰 ...

  5. ls存在的文件，不能操作

    bash-4.2# pwd/oracle/product/10.2.0/db_1/network/adminbash-4.2# lssqlnet.ora                 libnrad ...

  6. nodejs 设计模式

    1 . 单例模式 顾名思义,单例就是保证一个类只有一个实例,实现的方法是,先判断实例是否存在,如果存在则直接返回,若不存在,则创建实例对象,并将实例对象保存在静态变量中,当下次请求时,则可以直接返回这 ...

  7. 统计mysql数据库中数据表/字段等数量的sql

    1.查询一个表中有多少个字段: SELECT COUNT(*) FROM information_schema. COLUMNSWHERE table_schema = '数据库名'AND table ...

  8. Codeforces Round #447 (Div. 2) C　构造

    现在有一个长度为n的数列 n不超过4000 求出它的gcd生成set 生成方式是对<i,j> insert进去(a[i] ^ a[i+1] ... ^a[j]) i<=j 然而现在给 ...

  9. Java编程时部分快捷键

    alt + / 内容助理 配置:Window->properties->keys->查看alt + /的配置,然后解除当前的配置->搜索content assist->解 ...

  10. Spring中Bean的生命周期是怎样的

    1.Spring对Bean进行实例化(相当于程序中的new Xx()) 2.Spring将值和Bean的引用注入进Bean对应的属性中 3.如果Bean实现了BeanNameAware接口,Sprin ...