页面遮罩层,并且阻止页面body滚动。bootstrap模态框原理,.bootstrap模态
实现思路:
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;
}
网页部分的代码
复制代码 代码如下:
点我显示遮罩层
js部分的代码
复制代码 代码如下:
function showMask(){
$('body').css("overflow","hidden")
$("#cover").show();
}
懂bootstrap的过来看看,bootstrap模态框的问题
在触发模态框的组件上添加以下属性
data-backdrop="static"
bootstrap使用模态框当弹出两层的时,遮罩层会把原有的透明度减少
为什么会有两个弹出框呢
本站文章为3672js教程网友分享投稿,版权归原作者,欢迎任何形式的转载,但请务必注明出处。同时文章内容如有侵犯了您的权益,请联系我们处理。