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 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)相关推荐
- 最实用最全悬浮Popup 拖动、跟随窗口移动、居中弹出、实时尺寸比例调整、不折叠关闭、截断显示、输入焦点
使用Popup初衷是什么? >>> 悬浮效果,可以透过Pop弹窗,继续操作窗口背后的动作.像导航 原始Popup控件,设置 [PlacementTarget] 目标控件,就相对于该控 ...
- Js实现点击超链接弹出层,效果仿Discuz登录!
主要应用到的是dispaly:none 和 dispaly:block;来控制实现的: <a id="link" href="#" onclick=&qu ...
- 为什么layer中弹出层内容点击事件不起作用
最近有个项目,要求弹出层里再添加点击事件,而实际情况是,弹出层不触发点击事件. 原因:click()只对页面现有元素绑定点击事件,而弹出层里的元素属于动态生成的新元素,不在现有的生成的页面里,不是不触 ...
- html页面添加遮罩层,在浏览器窗口上添加遮罩层的方法
如何在浏览器窗口上添加一个遮罩层 背景 在web2.0中,页面弹窗是一个很常见的交互方式,这样既可以避免不必要的页面跳转,也可以改进界面的布局和可交互性. 但是,浏览器原生的弹窗函数(alert, c ...
- 微信小程序弹出框竖向滚动_微信小程序 解决自定义弹出层滑动时下层页面滚动问题...
WXML 将整个底层页面使用 scroll-view 包裹起来,设置 scroll-y 当显示弹出层的时候为 true, 闭关弹出层的时候为 false WXSS Page 设置为绝对定位,宽高各百分 ...
- 居中弹出一个层,打开一个文件。
<style type="text/css"> .mydiv { background-color: #A3CC4F; border: 1px solid #66666 ...
- iOS 模态窗口居中弹出背景半透明
实现功能:点击UIImageView弹出一个模态窗口并居中显示,背景为灰色半透明 App中有很多地方用到点击用户头像并弹出一个模态窗体,显示该用户的一些信息,考虑到很多地方使用,就写了一个UIImag ...
- 遮罩层和弹出层(居中)
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>居中弹 ...
- html弹出层很字体模糊了,由CSS3 transform 字体模糊问题揭示出浏览器渲染机制
为了实现垂直.水平居中效果,经常会用到 position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); 但是在实际项目中, ...
- Lightbox弹出层插件:jQuery弹出层插件用法
插件描述:这款lightbox,可应用于图片.swf文件.html文件等等. Lightbox弹出层插件 说明文档 : 1.引入资源,(JQ1.3+)和JS文件: <script type=& ...
最新文章
- 第88天:HTML5中使用classList操作css类
- 读文件 —— 读写配置文件
- case....when ...多重判断
- linux——文件权限的更改与管理
- Linux Kernel 3.8.8/3.4.41/3.0.74 发布
- 利用IE8开发人员工具调试JavaScript脚本
- C#对window 硬件类操作,ManagementObjectSearcher
- 爱荷华大学计算机科学专业,爱荷华大学计算机科学专业好不好?专业设置详情一览...
- 【latex】输入角度符号°
- svn://127.0.0.1/shop
- JavaScript基础知识(四)
- bzoj 3357: [Usaco2004]等差数列(DP+map)
- centos7安装rabbitmq_rabbitmq v3.7.16安装部署文档
- mysql里类似sequence_MySql中实现类似Oracle的Sequence方案
- 屏幕坐标转换世界坐标
- python怎样分析文献综述_论文的文献综述有什么方法吗?
- AndroidStudio haxm installer win10安装失败问题建议
- 【闪电搜索算法】基于闪电搜索算法求解单目标优化问题matlab代码
- 绝缘电阻仪测试仪与绝缘耐压测试仪的区别
- UE4(虚幻4)基础:光照需要重建
热门文章
- 【bzoj1614】[Usaco2007 Jan]Telephone Lines架设电话线 二分+SPFA
- 测试评审要点说明(测试计划、用例、报告)
- 鸡啄米vc++2010系列15(消息对话框)
- Apache-一个IP多个主机域名
- 窗体传值,子窗体,父窗体,反射,reflection,windows,组策略,gpedit.msc,动态创建窗体,谢谢...
- 深度梯度压缩:减小分布式训练的通信带宽
- Problem B: 取石子
- shutil模块拷贝与解压缩模块----day19
- 2059 mysql
- E - What Is Your Grade?