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

字號:


    實現(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();
    }