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()	關閉對話框

---

下載