網頁中經常會用到遮罩層的情況，在出現遮罩層的時候頁面會整體向右偏移一段距離，因此會出現頁面抖動，使用者體驗不好。
首先我們要思考為什麼會出現這種現象：
1：寫遮罩層的時候我們一般會給它設定fixed定位
2：為了不讓遮罩層下面的內容可滾動，我們一般會把body設定為overflow:hidden;
當遮罩層出現的時候，會把瀏覽器預設的17px寬度的滾動條給隱藏掉，這時候頁面就會向右偏移17px，既然我們已經找到了問題的根源那解決問題就好辦了：
解決方法：
1.在顯示遮罩層之前，先把根元素的border-right設定為17px寬的透明屬性，這樣就有個預設的佔位
2.在隱藏遮罩層的時候把根元素的border-right設定為none;
**示例：
彈窗封裝：
//js
//定義彈窗模組
var infowindowcallback = ,
render: function (title,text,btntext) ,
clickhandle: function (callback) )
}};
css:
/*提示視窗樣式*/
.reminderbox
.reminderbox .reminderbox-container
.reminderbox .reminderbox-container .title
.reminderbox .reminderbox-container .content
.btn-confirm
.btn-cancel
window.open("","_blank");
});
css彈出遮罩層
說明 需要jquery支援，支援ie8 googlechrome，firefox，話不多說，上 html type button onclick showmaskshadow value 彈出遮罩層 class bgdiv div class contentdiv type button oncli...
如何彈出遮罩層遮蔽頁面所有操作
這次專案中需要使用在彈出視窗時使用遮罩層來遮蔽頁面上其他的操作，所以參考資料寫了乙個可復用的 brmms brmms.backdiv 彈出乙個底部的層遮住頁面，禁止使用者進行當前層外的其他操作 brmms.backdiv.popbackdiv function 去掉底部的層 brmms.backdi...
Vue 彈出層時 禁止頁面滑動
上 滑動限制 stop document.body.style.overflow hidden document.addeventlistener touchmove mo,false 禁止頁面滑動 取消滑動限制 move document.body.style.overflow 出現滾動條 doc...