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

來源：本站原創(chuàng)|時間：2020-01-11|欄目：CSS/HTML|點擊：次

實現(xiàn)思路：

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

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

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

遮罩層的樣式代碼，紅色部分是關鍵的部分

復制代碼代碼如下:

.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)頁部分的代碼

復制代碼代碼如下:

<body>

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

js部分的代碼

復制代碼代碼如下:

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

上一篇：li中插入img圖片間有空隙的解決方案

欄目：CSS/HTML

下一篇：討論CSS中的各類居中方式

本文標題：頁面遮罩層，并且阻止頁面body滾動。bootstrap模態(tài)框原理

本文地址：http://mengdiqiu.com.cn/a1/CSS_HTML/11509.html

更多CSS/HTML

您可能感興趣的文章

01-11手機屏幕尺寸測試——手機的實際顯示頁面的寬度

欧美大屁股bbbbxxxx,狼人大香伊蕉国产www亚洲,男ji大巴进入女人的视频小说,男人把ji大巴放进女人免费视频,免费情侣作爱视频

CSS/HTML

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

您可能感興趣的文章

閱讀排行

本欄相關

隨機閱讀

欧美大屁股bbbbxxxx,狼人大香伊蕉国产www亚洲,男ji大巴进入女人的视频小说,男人把ji大巴放进女人免费视频,免费情侣作爱视频

CSS/HTML

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

您可能感興趣的文章

閱讀排行

本欄相關

隨機閱讀

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