页面遮罩层，并且阻止页面body滚动。bootstrap模态框原理
更新时间：2014年05月22日 09:43:58 作者：
最近在做手机端效果的时候，页面需要在下拉菜单滚动的时候，阻止页面的滚动。于是就研究了一下bootstrap模态框的实现原理。
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
实现思路：
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" 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();
}
相关文章
利用CSS控制SELECT中的OPTION是否不允许选...2006-09-09
在线ASC码查询...2006-09-09
在css中类选择器就是在类名前面加一个点号了，如果是多类不是打多个点号而以.important.urgent这种形式了，下面我来给大家介绍一下CSS 类选择器与多类选择器的用法2013-11-11
表格隔行换色 css expression...2006-07-07
小编最近学习了一下高德地图web版的使用,总结了一下高德基础控件的应用,高德地图是开源可编辑的,方法不是很难,有兴趣的朋友可以试一试自己编辑一下.2018-05-05
如何设置一个指定高度的DIV...2006-09-09
文字应用css滤镜集锦...2006-08-08
div＋css布局入门...2006-09-09
微软终于对网页三剑客下手了...2006-09-09
在日常布局当中，会遇到文本内容超过容器的情况。非常常见的一种解决方案是超出省略。但是有的时候，由于场景的限制，可能会出现在一些无法使用超出打点省略的方法的场景，譬如在导航栏中：在容器定宽但是文本又溢出且不能换行的情况下，我们就需要寻求另外的解决方案。2021-05-05
最新评论