在我們前端開發過程中,有時可能會需要添加遮蓋層彈窗,如:彈窗登錄、搜索、詳情圖片、內容詳情等功能,這時遮蓋彈窗我們可以使用position: fixed;的方式來實現遮蓋層效果。css設置方法如下:

這樣遮蓋層效果就實現了,但有時候我們會遇到一些特殊情況,比如彈窗中的內容信息很多,彈窗高度很高超出其底部body的高度,這樣就會出現底部超出留白的情況,我們應該怎樣處理呢?我在遇到這個問題時,尋找了許多方法,但是基本上都是華而不實,最后的解決方法卻是樸實無華。
實現思路:出現這種情況后,我們需要思考其最本質的問題是什么,這樣我們從最本質的問題出發就找到了最簡單的實現方法。像遮蓋層彈窗超出時,我想到的是:
1.怎樣能夠讓遮蓋層不影響到其底部body
2.鼠標滾動是其底部頁面滾動,怎樣取消其滾動效果
3.怎樣讓遮蓋層滾動
4.最后發現要實現的就是:取消body滾動條、遮蓋層添加滾動條

上一篇: 百度地圖api的調用及自定義
下一篇: 百度分享鏈接在頁面中的簡單實現方法和應用
關鍵詞:



