移動端經常使用alert、confirm、toast等彈窗插件，兼容 jQuery/Zepto

移動端彈窗插件第二版，包括常見的 alert、confirm、toast、notice 四種類型彈窗，支持 jQuery 和 Zepto 庫。

特性

• 支持常見的 alert、confirm、toast、notice 四種類型彈窗

• 可選擇使用 IOS 或者 Material Design 風格的彈窗

• 可自定義按鈕的文字、樣式、回調函數，支持多個按鈕

• 多個彈窗狀態改變回調函數

• 同時支持 jQuery 和 Zepto 庫

• 可擴展性強

新增

• 彈窗可選 IOS 或者 Material Design 風格

• 可自定義多個按鈕

• 按鈕排版樣式，並排或者堆疊

• notice 彈窗的位置，居中或者底部

截圖

示例

查看效果，掃二維碼或者移步→：demo示例

使用說明

一、引入 CSS 文件

<link rel="stylesheet" href="../css/dialog.css" />

二、引入 JS 文件

<script src="../lib/zepto.min.js"></script>
<script src="../js/dialog.js"></script>

三、HTML 結構

<button id="btn-01">顯示彈窗</button>

四、實例化

$(document).on('click', '#btn-01', function() {
    var dialog1 = $(document).dialog({
        content: 'Dialog 移動端彈窗插件的自定義提示內容',
    });
});

參數

參數	默認值	說明
type	'alert'	彈窗的類型。alert: 肯定; confirm: 肯定/取消; toast: 狀態提示; notice: 提示信息
style	'default'	alert 與 confirm 彈窗的風格。 default: 根據訪問設備平臺; ios: ios 風格; android: MD design 風格
titleShow	true	是否顯示標題
titleText	'提示'	標題文字
closeBtnShow	false	是否顯示關閉按鈕
content	''	彈窗提示內容, 值能夠是 HTML 內容
contentScroll	true	alert 與 confirm 彈窗提示內容是否限制最大高度, 使其能夠滾動
dialogClass	''	彈窗自定義 class
autoClose	0	彈窗自動關閉的延遲時間(毫秒)。 0: 不自動關閉; 大於0: 自動關閉彈窗的延遲時間
overlayShow	true	是否顯示遮罩層
overlayClose	false	是否能夠點擊遮罩層關閉彈窗
buttonStyle	'side'	按鈕排版樣式。side: 並排; stacked: 堆疊
buttonTextConfirm	'肯定'	肯定按鈕文字
buttonTextCancel	'取消'	取消按鈕文字
buttonClassConfirm	''	肯定按鈕自定義 class
buttonClassCancel	''	取消按鈕自定義 class
buttons	[]	confirm 彈窗自定義按鈕組, 會覆蓋"肯定"與"取消"按鈕; 單個 button 對象可設置 name [ 名稱 ]、class [ 自定義class ]、callback [ 點擊執行的函數 ]
infoIcon	''	toast 與 notice 彈窗的提示圖標, 值爲圖標的路徑。不設置=不顯示
infoText	''	toast 與 notice 彈窗的提示文字, 會覆蓋 content 的設置
position	'center'	notice 彈窗的位置, center: 居中; bottom: 底部

回調函數

函數	默認值	說明
onClickConfirmBtn	function(){}	點擊「肯定」按鈕的回調函數
onClickCancelBtn	function(){}	點擊「取消」按鈕的回調函數
onClickCloseBtn	function(){}	點擊「關閉」按鈕的回調函數
onBeforeShow	function(){}	彈窗顯示前的回調函數
onShow	function(){}	彈窗顯示後的回調函數
onBeforeClosed	function(){}	彈窗關閉前的回調函數
onClosed	function(){}	彈窗關閉後的回調函數

方法

方法	說明
obj.close	關閉對話框。 用法：dialogObj.close()
obj.update	更改 toast 和 notice 類型彈窗內容 ( 圖標以及提示文字 ) 可傳入參數： content: 彈窗內容, 能夠是HTML infoIcon: 彈窗提示圖標 infoText: 彈窗提示文字 autoClose: 自動關閉的延遲時間 onBeforeClosed: 關閉前回調函數 onClosed: 關閉後回調函數

目錄結構

.
├─dist                # 項目發佈資源目錄, Grunt 生成
│  ├─css              # 項目 CSS 文件
│  ├─demos            # 項目示例頁面
│  ├─images           # 項目 image 文件
│  ├─js               # 項目 JS 文件
│  │  ├─dialog.js     # 彈窗 JS
│  │  ├─dialog.min.js # 彈窗最小版本 JS
│  │  └─example.js    # 示例 JS
│  └─lib              # 公共 JS 文件
│
├─src                 # 實際進行開發的目錄
│  ├─css              # 項目 CSS 文件, 由 Grunt 生成
│  ├─demos            # 項目示例頁面
│  ├─images           # 項目 image 文件
│  ├─js               # 項目 JS 文件
│  │  ├─dialog.js     # 彈窗主要 JS
│  │  ├─example.js    # 示例 JS
│  │  ├─ripple.js     # 點擊水波紋效果 JS
│  │  └─tapEvent.js   # 點擊事件 JS
│  ├─lib              # 公共 JS 文件
│  ├─scss             # 項目相關 SCSS 文件
│  └─templates        # 初始靜態 DMEO 資源目錄
│
├─Gruntfile.js        # Grunt任務配置
├─_config.json        # Grunt配置所需信息
└─package.json        # 項目信息以及依賴

Grunt 使用方法

一、安裝 Grunt

npm install

二、在本地運行項目

grunt serve