实现思路:
1、需要有一个层将body遮住,放在body上方。
2、修改body的overflow属性值为:hidden
废话不多说了,将关键代码贴出来了,兼容火狐,谷歌,ie
遮罩层的样式代码,红色部分是关键的部分
复制代码 代码如下:
.cover {
position:fixed; top: 0px; right:0px; bottom:0px;filter: alpha(opacity=60); background-color: #777;
z-index: 1002; left: 0px; display:none;
opacity:0.5; -moz-opacity:0.5;
}
.cover {
position:fixed; top: 0px; right:0px; bottom:0px;filter: alpha(opacity=60); background-color: #777;
z-index: 1002; left: 0px; display:none;
opacity:0.5; -moz-opacity:0.5;
}
网页部分的代码
复制代码 代码如下:
<body>
<body>
<div class="container" style="height:2000px;">
<div style="height:1000px;"></div>
<a href="javascript:;" onclick="showMask()" >点我显示遮罩层</a><br />
</div>
<div id="cover" class="cover"></div>
</body>
js部分的代码
复制代码 代码如下:
function showMask(){
$('body').css("overflow","hidden")
$("#cover").show();
}
function showMask(){
$('body').css("overflow","hidden")
$("#cover").show();
}
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
软考中级精品资料免费领
- 历年真题答案解析
- 备考技巧名师总结
- 高频考点精准押题
- 资料下载
- 历年真题
193.9 KB下载数265
191.63 KB下载数245
143.91 KB下载数1148
183.71 KB下载数642
644.84 KB下载数2756
相关文章
发现更多好内容- Apache APISIX Java 的社区支持情况如何?(apisix Java的社区支持情况)
- 提升Ruby代码安全:有效管理策略与实践
- 如何在 Java 中实现文件上传和下载功能?(Java怎么实现文件上传和下载功能)
- Java 如何实现发送 TCP 报文的方法?(java发送tcp报文的方法是什么)
- 如何巧妙重写 Java 类的 toString() 方法?(如何重写Java类的toString()方法)
- Ruby加密技术:如何改变数据存储方式?
- 在 Java 中,arraycopy 方法的具体用法是什么?(java中arraycopy的用法是什么)
- 如何巧妙利用 Java Map 来实现缓存功能?(如何利用Java Map实现缓存功能)
- Java 中 zlib 库的使用技巧有哪些?(Java中zlib库的使用技巧)
- 在 Java 中如何将 Object 转换为自定义类型?(java怎么将Object转换为自定义类型)
猜你喜欢
AI推送时光机 咦!没有更多了?去看看其它编程学习网 内容吧