本身動手豐衣足食，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