您的位置：首页技术文章

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

【字号：大 中 小】日期：2023-03-15 17:04:38浏览：9作者：猪猪

实现思路：

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>
　　　　<div></div>
　　　　<a href="javascript:;" onclick="showMask()" >点我显示遮罩层</a><br />
　　</div>
　　<div id="cover"></div>
</body>

js部分的代码

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

标签： CSS HTML
上一条：CSS可以做的几个令你叹为观止的实例分享下一条：用css截取字符的几种方法详解（css排版隐藏溢出文本）
相关文章：
1. 怎么让div+css兼容ie6ie7ie8ie9和FireFoxChrome等浏览器2. requestAnimationFrame使用示例详解3. 基于JavaScript实现图片裁剪功能4. React优雅的封装SvgIcon组件示例5. uniapp自定义验证码输入框并隐藏光标6. 详解JavaScript中原始数据类型Symbol的使用7. JavaScript深拷贝方法structuredClone使用8. uniapp 手机验证码输入框实现代码(随机数、倒计时、隐藏手机号码中间四位)可以直接使用9. 使用Node.js实现Clean Architecture方法示例详解10. Jquery使用原生AJAX方法请求数据