在原有网页上弹出一个子窗口并且实现半透明背景，原网页的滚动效果失效

　　今天在做一个类似花瓣的采集功能的页面时，要实现这样的页面效果：在原页面上弹出新的子窗口B，同时原页面A被一层透明的图层C覆盖，图层C在子窗口B下面而在页面A上面； 原页面A的滚动轴消失，页面禁止滚动，子窗口B的滚动不受印象。。

　　在这里写下几点操作的操作点：

　　1、 把子窗口B和图层C放在同一个div中，在一起追加到body标签中。

参考html代码：

<div id="inBody">
　　<div class="B"></div>
　　<div class="C"></div>
</div>

参考css：

#idBody{
　　display: none; 　　　　　　　　/*在加载到网页后才进行block操作*/
}

.B{
　　z-index: 999; 　　　　　　　　 /* 如果要保持总在页面最顶端，这个值尽量往大定义 */
　　position: fixed; 　　　　　　 /* 以下几个属性实现固定大小的子窗口居中 */
　　top: 50%;　　　　　　　　　　　 /* 先把子窗口的左上角放在页面中间，在用margin来调整 */
　　left: 50%;
　　width: 500px;
　　height: 300px;
　　margin-left: -250px;　　　　 /*  margin-left和top 始终是固定宽高的负一半  */
　　margin-top: -150px;
　　/* 其它css */
}

.C{
　　z-index: 998;　　　　　　　　　/* 因为始终在子窗口B下方，所以只要比子窗口B小一点就可一了。 */
　　background: rgba(255. 255. 255. 0.6); /* 实现图层透明 */
　　position: fixed; 　　　　　　 /* 以下实现图层覆盖整个浏览器页面 */
　　top: 0;
　　right: 0;
　　bottom: 0;
　　left: 0;
}

　　2、把原网页A的滚动功能屏蔽。

参考js代码：

$(' getInBox ').click(function(){ 　　　　　　/* 点击弹出子窗口B */
$('body').css('overflow-x', 'hidden'); 　　　/* 把原网页A的滚动轴的自动出现去掉 */
$('body').css('overflow-y', 'hidden');
$('.inBox').slow(100);
})

$(' delInBox').click(function(){　　　　　　　/* 关闭子窗口B */
$('body').css('overflow', 'auto'); 　　　　　/* 恢复原网页A的滚动轴 */
$('.inBox').hide(100);
})

题外话： js禁止鼠标的滚动效果：

window.onmousewheel=function(){return false};