頁面遮罩層，并且阻止頁面body滾動。bootstrap模態框原理，.bootstrap模態

實現思路：

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;

}

網頁部分的代碼

復制代碼 代碼如下:

點我顯示遮罩層

js部分的代碼

復制代碼 代碼如下:

function showMask(){

$('body').css("overflow","hidden")

$("#cover").show();

}

懂bootstrap的過來看看，bootstrap模態框的問題

在觸發模態框的組件上添加以下屬性

data-backdrop="static"

bootstrap使用模態框當彈出兩層的時，遮罩層會把原有的透明度減少

為什么會有兩個彈出框呢

本站文章為3672js教程網友分享投稿，版權歸原作者，歡迎任何形式的轉載，但請務必注明出處。同時文章內容如有侵犯了您的權益，請聯系我們處理。

總結

以上是生活随笔為你收集整理的html遮罩层模态提示,页面遮罩层，并且阻止页面body滚动。bootstrap模态框原理，.bootstrap模态...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。