頁面遮罩層，并且阻止頁面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();
}
您可能感興趣的文章:
- Bootstrap每天必學(xué)之模態(tài)框（Modal）插件
- 淺析BootStrap中Modal（模態(tài)框）使用心得
- Bootstrap 模態(tài)框（Modal）帶參數(shù)傳值實(shí)例
- bootstrap模態(tài)框消失問題的解決方法
- Bootstrap模態(tài)框(modal)垂直居中的實(shí)例代碼
- 在iframe中使bootstrap的模態(tài)框在父頁面彈出問題
- bootstrap 模態(tài)框（modal）實(shí)現(xiàn)水平垂直居中顯示
- BootStrap 模態(tài)框?qū)崿F(xiàn)刷新網(wǎng)頁并關(guān)閉功能
- Bootstrap模態(tài)框禁用空白處點(diǎn)擊關(guān)閉
- Bootstrap實(shí)現(xiàn)模態(tài)框效果
相關(guān)文章
CSS基礎(chǔ)學(xué)習(xí)...2006-09-09
這篇文章主要介紹了關(guān)于HTML5的img標(biāo)簽,<img>標(biāo)簽用于向網(wǎng)頁中添加相關(guān)圖片,從技術(shù)上講，圖像并不會(huì)插入?HTML?頁面中，而是鏈接到?HTML?頁面上,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了flex布局下兩端對(duì)齊，不滿左對(duì)齊,需要的朋友可以參考下2022-12-12
定義標(biāo)題的最好方法...2006-09-09
純CSS實(shí)現(xiàn)鼠標(biāo)放上去改變文字內(nèi)容
這篇文章主要介紹了純CSS實(shí)現(xiàn)鼠標(biāo)放上去改變文字內(nèi)容,需要的朋友可以參考下2014-05-05
兼容各個(gè)瀏覽器的技巧...2006-09-09
在HTML中，link標(biāo)簽是一個(gè)自閉合元素，通常位于文檔的head部分。它用于建立與外部資源的關(guān)聯(lián)，如樣式表、圖標(biāo)等。link標(biāo)簽具有多個(gè)屬性，其中rel和href是最常用的，文中有詳細(xì)的代碼示例，感興趣的同學(xué)可以參考閱讀2023-05-05
用!important解決IE和Mozilla的布局差別...2006-09-09
小區(qū)后臺(tái)管理系統(tǒng)項(xiàng)目前端html頁面模板實(shí)現(xiàn)示例
這篇文章主要為大家介紹了java項(xiàng)目開發(fā)小區(qū)后臺(tái)管理系統(tǒng)前端頁面模板的示例代碼，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步2021-11-11
HTML DOM setInterval和clearInterval方法案例詳解
這篇文章主要介紹了HTML DOM setInterval和clearInterval方法案例詳解2021-08-08