cxDialog 是基于 jQuery 的对话框插件,支持自定义外观样式,同时兼容 Zepto,方便在移动端使用。
- 版本:
- jQuery v1.7+ | Zepto v1.0+
-
jQuery cxDialog v1.2.2
* 兼容 Zepto,需要 data 模块 支持
在线实例
实例预览 基础示例
实例预览 内容设定
实例预览 添加按钮
实例预览 外观样式
实例预览 API 接口
实例预览 支持 AMD 规范
实例预览 兼容 Zepto
默认效果
- $.cxDialog('Hello World!');
复制
模态对话框
$.cxDialog({
title: 'cxDialog',
info: '欢迎使用 cxDialog 对话框!',
lockScroll: true,
background: '#000'
});
复制
使用方法
载入 CSS 文件
- <link rel="stylesheet" href="jquery.cxdialog.css">
复制
载入 JavaScript 文件
<script src="jquery.js"></script>
<script src="jquery.cxdialog.js"></script>
复制
调用 cxDialog
$.cxDialog('内容');
$.cxDialog('内容', function(){
// click ok callback
}, function(){
// click no callback
});
$.cxDialog({
title: '标题',
info: '内容',
ok: function(){
// code
},
no: function(){}
});
复制
设置全局默认值
- $.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() | 关闭对话框 |