在原有網頁上彈出一個子視窗並且實現半透明背景，原網頁的滾動效果失效

　　今天在做一個類似花瓣的採集功能的頁面時，要實現這樣的頁面效果：在原頁面上彈出新的子視窗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};