jQuery cxDialog 对话框

Posted 2020-08-15

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()	关闭对话框

---

下载