佳木斯湛栽影视文化发展公司
主頁 > 知識庫 > 頁面遮罩層，并且阻止頁面body滾動。bootstrap模態(tài)框原理

頁面遮罩層，并且阻止頁面body滾動。bootstrap模態(tài)框原理
熱門標(biāo)簽：智能手機(jī) 呼叫中心市場需求 網(wǎng)站文章發(fā)布 檢查注冊表項 美圖手機(jī) 銀行業(yè)務(wù) 鐵路電話系統(tǒng) 服務(wù)器配置

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

1、需要有一個層將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)框效果

標(biāo)簽：滄州 樂山 河南 沈陽 上海 紅河 新疆 長治

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《頁面遮罩層，并且阻止頁面body滾動。bootstrap模態(tài)框原理》，本文關(guān)鍵詞  ；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 收縮
    • 微信客服
    • 微信二維碼

    • 電話咨詢

    • 400-1100-266
    剑川县| 阜新| 乌兰察布市| 沧源| 靖西县| 茌平县| 当涂县| 灌南县| 靖宇县| 芒康县| 宁武县| 卢龙县| 秀山| 上虞市| 开远市| 青州市| 罗山县| 晋城| 云浮市| 乌兰浩特市| 平邑县| 桃江县| 从江县| 贵溪市| 温州市| 万源市| 瑞金市| 江都市| 古交市| 商都县| 旌德县| 修水县| 肥城市| 犍为县| 通江县| 鄂托克前旗| 甘肃省| 满洲里市| 尼木县| 游戏| 鹰潭市|