45fan.com - 路饭网

搜索: 您的位置主页 > 电脑频道 > 编程代码 > 阅读资讯:制作一个遮罩层去阻止body滚动的实例

制作一个遮罩层去阻止body滚动的实例

2015-07-15 20:05:03 来源:www.45fan.com 【

制作一个遮罩层去阻止body滚动的实例

实现思路:

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();
}

 


本文地址:http://www.45fan.com/bcdm/14603.html
Tags: 页面 阻止 遮罩层
编辑:路饭网
推广内容
推荐阅读
热门推荐
推荐文章
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部