自己動手豐衣足食，h5手機端jquery彈窗外掛程式（事件冒泡、單例模式、遮蓋部分禁止預設滾動）

標籤：

感謝瀏覽，歡迎交流=。=

 

 

公司開發網頁多處需要使用彈窗，使用jquery-ui的定製化下載仍需要150多kb，想來有些奢侈（最終下來只有11kb，壓縮後2kb，啊，我的神），

手機端彈窗方式與pc端有些不同，而且手機上有一個彈窗出來滾動跟父頁面滾動相互影響的問題，

於是決定寫一個外掛程式，專門對付手機網頁的彈窗。

彈窗的mask和dialog兩部分都做成了position=fixed，比較喜歡這種效果，並且屏蔽了被遮住部分的滾動。

 

幾處認為需要留意的知識點或困痛點：

1.事件冒泡：

e.preventDefault()阻止事件預設行為。

event.stopPropagation();阻止事件冒泡

在jquery中return false等效於同時調用e.preventDefault()和e.stopPropagation()

return false除了阻止預設行為之外，還會阻止事件冒泡。如果手上有一份jquery原始碼的話，可查看其中有如下代碼：
if (ret===false){
　　event.preventDefault();
　　event.stopPropagation();
}

2.js單例的寫法：

使用閉包的這種特性可以達到一些令人開心的效果，外掛程式中singleMask和singleDialogManager均使用了單例，代碼可總結為如下：

3.彈窗及內部寬度高度的計算，感覺有的時候寫這些代碼真的需要拿張紙畫畫。

4.關於捲軸滾到頂部和底部

elem.clientHeight + elem.scrollTop - elem.scrollHeight == 0可以判斷捲軸是否到底部

elemDialogContent.scrollTop == 0可以判斷捲軸是否在頂部

5.關於touchstart,touchmove,touchend擷取觸摸點

e.originalEvent.touches是一個數組，描述多個觸摸事件

後觸摸的touchstart事件將觸發滾動，所以這裡touchmove事件中監控touches[touches.length - 1]這個對象

6.結合上面的4和5條，可以控制其對滾動的響應，通過e.preventDefault()阻止預設滾動行為。核心代碼如下：

 

 

代碼展示：jquery.dialog.js

dialog.css

頁面調用代碼：

$("#test-btn").bind({//彈窗代碼
　　"touchstart": function () {
　　　　$("#test-dialog").dialog({
　　　　　　title: "彈窗測試",
　　　　　　width: 1000,
　　　　　　height: 1000
　　　　});
　　　　return false;
　　}
})

$("#test-dialog").dialog({"close":true})//關閉代碼

最終效果：

代碼在GitHub上：

整天用人家開源的，咱也開源吧：https://github.com/SoulRIver2015/jquery-plugins/tree/master/mobile/river/dialog

自己動手豐衣足食，h5手機端jquery彈窗外掛程式（事件冒泡、單例模式、遮蓋部分禁止預設滾動）