1. shade.css
.shade { width: 100%; position: absolute; height:100%; background-color: black; opacity: 0.5; filter: alpha(opacity = 50); left:0; top:0; z-index:1001; }
2. shade.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <link rel="stylesheet" type="text/css" href="shade.css" /> </head> <body> <div id="shade" class="shade"></div> <!-- <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>--> <!-- <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>--> <!-- <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>--> <!-- <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>--> <!-- <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>--> <!-- <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>--> </body> <script type="text/javascript"> var shade = document.getElementById("shade"); var scrollHeight = document.documentElement.scrollHeight; var clientHeight = document.documentElement.clientHeight; var hideHeight = scrollHeight>clientHeight?scrollHeight:clientHeight; shade.style.height =hideHeight+ "px"; </script> </html>
相关推荐
简单几行代码实现web页面遮罩框功能带等待图片 。 -洋
Cesium地图反选遮罩,支持自定义遮罩颜色
本文实例讲述了JS简单实现点击按钮或文字显示遮罩层的方法。分享给大家供大家参考,具体如下: 运行效果图如下: 完整代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <...
具体使用可参照我的博客https://blog.csdn.net/wangxiaoertedaye/article/details/88886771,这里积分无法调整,博客理由详细代码复制即可使用
js实现的弹出遮罩层特效,代码简单、易用。
vue如何简单的实现弹框,遮罩,点击其他区域关闭弹框, 简单的思路是以一个div作为遮罩, 控制其的v-if(v-show)即可, 掌握到技巧既可以任意扩展。 v-if 是直接删除dom节点, 就是这个div就不存在了 v-show 是控制dom的...
很多刚开始接触web的朋友,不知道遮罩怎么写,我在这里给一个简单的demo,希望能帮助到大家
主要介绍了jQuery超简单遮罩层实现方法,结合实例形式详细分析了jQuery遮罩层相关属性样式动态控制操作技巧,需要的朋友可以参考下
android好看的遮罩层,简单的代码实现,以后遮罩层可以这样实现,一次学习,百次应用,妈妈再也不用担心遮罩层的问题
WPF弹出半透明遮罩,比较简单,适合初学者
通过遮罩完成以上效果,代码非常简单,不过需要准备遮罩层要用的alpha通道图片,对于非常非常不美工的我来说,用d版的fireworks搞掂
JS实现遮罩层 适合使用在保存 查询 修改 删除等 当点击提交按钮后会锁定页面 并提示相应的问题 如:正在保存 等 保存完成后调用关闭方法或刷新页面即可关闭遮罩层 添加到项目中体验会有所提升 使用非常简单 祝需要...
微信小程序开发遮罩层弹出框的实现,简单实现,点击弹出遮罩,类似弹出框
今天我们展示如何用CSS遮罩创建一个有趣又简单但吸引人的过渡效果。与裁剪一样,遮罩是另外一种定义可见性和元素组合的方式。在下面的教程中,我们将向你展示如何应用新属性实现现代转换效果。我们将使用steps()和...
本文实例讲解了jquery遮罩层,包括遮罩层的不同样式实现、mask实现遮罩层等,分享给大家供大家参考,具体内容如下 一、jQuery实现遮罩层的不同样式 1.1 背景半透明遮罩层样式 需要一个黑色(当然也可以其他)背景,...
这是一个简单的登录的遮罩层,html加js就可以轻松的实现,是个不错的学习遮罩层
DIV层遮罩,简单功能实现,代码不规范,随便写的
三种js特效(tab活页夹,斑马线,遮罩层)的简单实现.rar
实现弹出网页遮罩层,可兼容IE6/IE7/IE+++等; 缩放浏览器时,内容狂始终居中; 有点小bug,在IE6下,遮罩层颜色没透明,屎黑色,等我有空完善下。