立即登录 马上注册
首页 › 开发帮助文档 › 开发技术 › 页面遮罩层，并且阻止页面body滚动。bootstrap模态框原 ...

赞

评论

收藏

[Html/CSS] 页面遮罩层，并且阻止页面body滚动。bootstrap模态框原理

开发技术 开发技术 发布于：2021-06-27 21:21 | 阅读数：409 | 评论：0

　　实现思路：
　　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;
}

　　网页部分的代码
　　复制代码 代码如下:
<body>
　　<div class="container">
　　　　<div></div>
　　　　<a href="javascript:;" >点我显示遮罩层</a><br />
　　</div>
　　<div id="cover" class="cover"></div>
</body>

　　js部分的代码
　　复制代码 代码如下:
function showMask(){
$('body').css("overflow","hidden")
$("#cover").show();
}


关注下面的标签，发现更多相似文章
免责声明：

1. 本站所有资源来自网络搜集或用户上传，仅作为参考不担保其准确性！

2. 本站内容仅供学习和交流使用，版权归原作者所有！© 查看更多

3. 如有内容侵害到您，请联系我们尽快删除，邮箱：kf@codeae.com

分享到： QQ好友和群QQ好友和群 QQ空间QQ空间

举报

返回列表
相关帖子
avatar
1449 经验
1449 文档
OPNE在线字典
  • 手机版| 免责声明|
2021-2025  版权所有：CodeAE代码之家   
粤ICP备2023096576号-2