文章詳情頁
頁面遮罩層，并且阻止頁面body滾動。bootstrap模態(tài)框原理
瀏覽：98日期：2022-06-02 13:10:38
實現(xiàn)思路：
1、需要有一個層將body遮住，放在body上方。
2、修改body的overflow屬性值為：hidden
廢話不多說了，將關(guān)鍵代碼貼出來了，兼容火狐，谷歌，ie
遮罩層的樣式代碼，紅色部分是關(guān)鍵的部分
復制代碼 代碼如下:
.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>
<div></div>
<a href="javascript:;" onclick="showMask()" >點我顯示遮罩層</a><br />
</div>
<div id="cover"></div>
</body>
js部分的代碼
復制代碼 代碼如下:
function showMask(){
$("body").css("overflow","hidden")
$("#cover").show();
}
相關(guān)文章：
1. python實現(xiàn)讀取類別頻數(shù)數(shù)據(jù)畫水平條形圖案例2. python中PyQuery庫用法分享3. python操作數(shù)據(jù)庫獲取結(jié)果之fetchone和fetchall的區(qū)別說明4. CSS可以做的幾個令你嘆為觀止的實例分享5. CSS3實現(xiàn)動態(tài)翻牌效果 仿百度貼吧3D翻牌一次動畫特效6. 使用css實現(xiàn)全兼容tooltip提示框7. python 爬取嗶哩嗶哩up主信息和投稿視頻8. .NET6打包部署到Windows Service的全過程9. ASP.NET MVC前臺動態(tài)添加文本框并在后臺使用FormCollection接收值10. ASP動態(tài)網(wǎng)頁制作技術(shù)經(jīng)驗分享
排行榜
網(wǎng)公網(wǎng)安備