cxDialog 是基于 JavaScript 的对话框插件,支持自定义外观样式。
Demo: https://ciaoca.github.io/cxDialog/
从 v2.0 开始,已移除 jQuery 的依赖,如果需要使用旧版,可查看 v1 分支。
<link rel="stylesheet" href="cxdialog.css"> <script src="cxdialog.js"></script>
npm install cxdialog
import 'cxdialog.css'; import cxDialog from 'cxdialog';
// 简易的方式 cxDialog('内容'); cxDialog('内容', () => { // click ok callback }, () => { // click no callback }); // 传入参数 cxDialog({ title: '标题', info: '内容', ok: () => {}, no: () => {} });
cxDialog.defaults.title = '提示';
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| title | string | '' | 标题 |
| info | string element |
'' | 内容,可设置为文本内容,或 DOM 元素 |
| ok | function | undefined | 确认按钮回调函数 ※(注記) 值为 function 类型时,才会显示对应按钮 |
| no | function | undefined | 取消按钮回调函数 |
| okText | string | '确 定' | 确认按钮文字 |
| noText | string | '取 消' | 取消按钮文字 |
| buttons | array | [] | 自定义按钮 |
| baseClass | string | '' | 追加样式名称,不会覆盖默认的 class |
| maskClose | boolean | true | 是否允许点击遮罩层关闭对话框 |
cxDialog({ info: '内容', buttons: [ { text:'按钮1', callback: () => {} }, { text:'按钮2', callback: () => {} } ] });
| 名称 | 类型 | 说明 |
|---|---|---|
| text | string | 按钮文字 |
| callback | function | 回调函数 |
cxDialog.close();
| 名称 | 说明 |
|---|---|
| close | 关闭对话框 |