1. 程式人生 > >移動端彈出穿透問題(彈出層彈出後body還能滑動)

移動端彈出穿透問題(彈出層彈出後body還能滑動)

引用bootstrap的dialog元件,不過在移動端,dialog彈出,body還能滾動。

document.addEventListener('touchmove', function (event) {
    //判斷條件,條件成立才阻止背景頁面滾動,其他情況不會再影響到頁面滾動
    if ($(".modal").css('display')=="block") {
        event.preventDefault();
    }
});
有一個bug  如果dialog高度比較高,dialog也不能滾動了呀。

想著只對蒙版進行繫結事件,不過bootstrap的dialog  的蒙版是動態出現的,渣渣的我不會取dom。(老司機帶帶我呀),剛剛用jquery取了一下,咋也沒取到,道行不夠呀。(評論告訴我為啥子)

不過是自己寫的dialog可以這麼操作。

document.getElementById('mask').addEventListener('touchmove', function (event) {     //對蒙版繫結touchmove的屬性
    //判斷條件,條件成立才阻止背景頁面滾動,其他情況不會再影響到頁面滾動
    if ($(".modal").css('display')=="block") {
        event.preventDefault();
    }
})

-----------------------------------------分割符-----------------------------------------------------

補充新方法:

我點選彈出按鈕的時候給body加上一個class

.modal-open{overflow:hidden;}     //安卓高版本還是有點問題,我的low比手機是好的   

所以修改上面的class    

.modal-open{overflow:hidden;positon:fixed;

參考文章是:https://www.zhihu.com/question/35453154    

當彈出隱藏的時候再把這個class去掉就能解決了。

彈出是我自己寫的。。。。

不知道還有沒有好的方法

------------------------------------總結---------------

如果是自己寫的彈出層

我們只要對於body加上一個class

.modal-open{overflow:hidden;positon:fixed;

那麼就可以body不會滾動了,

當彈出隱藏的時候再把這個class去掉就能解決了。

參考:http://vr013.com/