jQuery cxDialog 對話方塊

標籤：

cxDialog 是基於 jQuery 的對話方塊外掛程式，支援自訂外觀樣式，同時相容 Zepto，方便在移動端使用。

• 版本：
• jQuery v1.7+ | Zepto v1.0+

• jQuery cxDialog v1.2.2

• github地址

* 相容 Zepto，需要 data 模組 支援

線上執行個體

執行個體預覽 基礎樣本

執行個體預覽 內容設定

執行個體預覽 添加按鈕

執行個體預覽 外觀樣式

執行個體預覽 API 介面

執行個體預覽 支援 AMD 規範

執行個體預覽 相容 Zepto

預設效果

1. $.cxDialog(‘Hello World!‘);

複製模態對話方塊

1. $.cxDialog({ 
2.   title: ‘cxDialog‘, 
3.   info: ‘歡迎使用 cxDialog 對話方塊！‘, 
4.   lockScroll: true, 
5.   background: ‘#000‘ 
6. });

複製使用方法載入 CSS 檔案

1. <link rel="stylesheet" href="jquery.cxdialog.css">

複製載入 JavaScript 檔案

1. <script src="jquery.js"></script> 
2. <script src="jquery.cxdialog.js"></script>

複製調用 cxDialog

1. $.cxDialog(‘內容‘); 
2.  
3. $.cxDialog(‘內容‘, function(){ 
4.   // click ok callback 
5. }, function(){ 
6.   // click no callback 
7. }); 
8.  
9. $.cxDialog({ 
10.   title: ‘標題‘, 
11.   info: ‘內容‘, 
12.   ok: function(){ 
13.     // code 
14.   }, 
15.   no: function(){} 
16. });

複製設定全域預設值

1. $.cxDialog.defaults.title = ‘提示‘;

複製參數說明

名稱	預設值	說明
title	‘‘	標題
info	‘‘	內容。可設定為常值內容，或 DOM 元素。
ok	null	點擊確認時的回呼函數
okText	‘確 定‘	確認按鈕顯示的文字
no	null	點擊取消時的回呼函數
noText	‘取 消‘	取消按鈕顯示的文字
buttons	[]	自訂按鈕
closeBtn	true	是否顯示關閉按鈕
lockScroll	false	是否鎖定滾動
baseClass	‘‘	給對話方塊容器增加 class，不會覆蓋預設的 class。
background	‘‘	遮罩背景的顏色，留空為透明遮罩。 可設定為：HEX、RGBA 等格式的顏色值，或 CSS background 屬性支援的值。 如不需要遮罩背景，設為：false
width	0	提示框固定寬度
height	0	提示框固定高度
zIndex	0	提示框的層級

buttons 參數

名稱	說明
text	按鈕顯示的文字
callback	回呼函數

API 介面

名稱	說明
$.cxDialog.close()	關閉對話方塊

下載

 

jQuery cxDialog 對話方塊