欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

頁面遮罩層，并且阻止頁面body滾動(dòng)。bootstrap模態(tài)框原理

 更新時(shí)間：2014年05月22日 09:43:58   作者：  
最近在做手機(jī)端效果的時(shí)候，頁面需要在下拉菜單滾動(dòng)的時(shí)候，阻止頁面的滾動(dòng)。于是就研究了一下bootstrap模態(tài)框的實(shí)現(xiàn)原理。

實(shí)現(xiàn)思路：

1、需要有一個(gè)層將body遮住，放在body上方。

2、修改body的overflow屬性值為：hidden

廢話不多說了，將關(guān)鍵代碼貼出來了，兼容火狐，谷歌，ie

遮罩層的樣式代碼，紅色部分是關(guān)鍵的部分

復(fù)制代碼 代碼如下:

.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;
}

網(wǎng)頁部分的代碼

復(fù)制代碼 代碼如下:

<body>

　　<div class="container" style="height:2000px;">
　　　　<div style="height:1000px;"></div>
　　　　<a href="javascript:;" onclick="showMask()" >點(diǎn)我顯示遮罩層</a><br />
　　</div>
　　<div id="cover" class="cover"></div>
</body>

js部分的代碼

復(fù)制代碼 代碼如下:

function showMask(){
$('body').css("overflow","hidden")
$("#cover").show();
}

相關(guān)文章

最新評(píng)論