由於公司活動頁面涉及彈框互動的操作比較多，為了實現彈框show出來的時候，可以在讓背景元素在當前位置鎖住，提高使用者的體驗，因此擼了一段**，完美實現了此需求，並且解決了滾動穿透的問題
方案一：
當彈框show出時，設定根元素和body元素的高度為螢幕高度，並且設定overflow為hidden，關閉彈框的時候移除樣式
方案二：
彈框show出時，設定body元素的position為fixed和width屬性為100%，並且設定滾動條的位置
方案一：
（1）、可以實現彈框show出來，但是存在滾動穿透的問題，在touch時，背景元素還是會滾動，並且滾動條會自動滾到頂部；
（2）、不能記錄到當前的位置
為了解決滾動穿透問題，實現過程給背景元素新增禁止touchmove事件的預設行為，但是在ios的safari和chrome瀏覽器下相容性有問題
實現繫結事件函式如下：
function addevent(onode, event, func, capture) else
}function removeevent(onode, event, func, capture) else
}
方案二：
在方案一的基礎上做出改變，採用position和width屬性實現與height，overflow同樣的效果，並且採用新的屬性scrollingelement獲取滾動條位置，設定body元素的top屬性為滾動條的位置的負數，保證彈框show出時，停留在當前位置
兩種方案實現比較，第一種方案可以實現鎖屏，但是不完美，存在滾動穿透問題，並且在使用者體驗上不佳，第二種方案可以完美解決方案一存在的問題，但是引用了新的屬性，需要引入乙個 polyfill document.scrollingelement.js(感謝yangg提供scrollingelemeng.js)
最終實現依賴如下**：
var screen =(function(configcss) ,
beforeclose: function ()
}})(config)
vuelockscreen.install = function (vue) ;
vue.prototype.$unlock = function () ;
};
vue 全域性彈框元件實現1
想實現乙個全域性的彈窗元件notice，以外掛程式的形式使用，先來分析一波 首先得有乙個notice的元件配置，也就是notice.vue檔案。想把notice這個元件掛載到body下，可以用render函式實現。全域性引用，就可以使用啦！import vue from vue const crea...
遮罩層 彈框 頁面滾動
第一種情況比較簡單，彈框和頁面都不可滾動 mask boxvar obtn document.getelementbyid btn omask document.getelementbyid mask obox document.getelementbyid box oclose document....
簡單的jQuery彈框外掛程式
要點 匿名函式包裹器 可搜尋一下 物件導向的程式設計 外掛程式的要素 擴充套件jquery本身的方法，extend 給jquery物件新增方法，對jquery.prototype進行擴充套件 新增乙個函式到jquery.fn jquery.prototype 物件，該函式的名稱就是你的外掛程式名稱 ...