解决遮罩层不能覆盖整个页面问题
来源:互联网 发布:windows更新失败 编辑:程序博客网 时间:2024/06/07 22:12
最近的项目需要一个点击,然后弹出遮罩层的效果,于是在页面中加了一个遮罩层(设定高度为100%)。
但是今天偶然发现,遮罩层只能遮住一屏的高度,若页面比一屏高的话,只要向下滚就可以发现没有被遮住的部分。
查资料得知,出现这种现象的原因是虽然设置了遮罩层的高度为100%,但是js代码执行的时候自动获取的其实还是当前屏幕的高度,因此导致它只能遮住一屏的内容。那么解决的方案也就是获取屏幕高度和当前页面高度,选取较大的一个设置为遮罩层的高度即可。
修正的代码如下,亲测有效:
var doc = document.documentElement; relHeight = (doc.clientHeight > doc.scrollHeight) ? doc.clientHeight : doc.scrollHeight;//获取屏幕高度和当前页面高度中的较大值 document.getElementById('bg').style.height = relHeight+'px';//id为bg的div就是我页面中的遮罩层
需要注意的是,在设置遮罩层的高度的时候后面一定要拼接上‘px’这个字符串,开始时我没有拼接,发现代码完全无效,纠结了很久……
阅读全文
0 0
- 解决遮罩层不能覆盖整个页面问题
- 用层覆盖整个页面
- 覆盖整个页面的div
- 解决iframe跳转不刷新整个页面小问题
- 如何让div覆盖整个页面?
- 解决页面中不能复制问题.txt
- 解决同一个页面不能跳转的问题
- iframe中弹出框后添加覆盖整个页面的遮罩层并且不覆盖子页面中的弹出框
- div 不能占满整个页面
- 获取滚动条位置使遮蔽罩始终覆盖整个页面
- 解决IE下某些页面不能刷新显示的问题
- jquery.PrintArea.js 打印整个页面问题
- 福昕阅读器不能完全显示整个页面的解决办法
- 解决BitBlt 覆盖按钮问题
- c++解决棋盘覆盖问题
- java解决棋盘覆盖问题
- 解决手动JSP页面中URL的麻烦(但不能解决跨域问题)
- 遮罩层不能覆盖导航条
- mongodb删除集合后磁盘空间不释放
- 如何粘贴代码
- 在Android开发中巧妙使用观察者模式避免内存泄露
- 亚马逊海外岗位技术面试经验分享
- 简单排序——冒泡排序及其优化
- 解决遮罩层不能覆盖整个页面问题
- mybatis获取到的数据为NULL
- 自己写一个布局注解
- 直接插入排序算法-设置哨兵版
- 【SVN】安装
- 文件上传与下载
- hdu 1595 find the longest of the shortest (Dijkstra)
- WebGL在Firefox浏览器中已拦截跨源请求(CORS 头缺少)的解决方法(服务器为IIS)
- 如何在ubuntu上搭建hustoj?