对话框触发器
对话框触发器允许你不需要书写静态对话框 HTML,直接使用触发按钮或者一行 JS 代码即可让一个全新的对话框展现。支持使用 Ajax 从远程获取内容,或者通过 iframe 加载任何页面内容,当然不使用远程内容,直接使用本地内容也是很方便。
Ajax 对话框
在对话框触发按钮上通过 data-url
属性指定远程内容的 URL 地址。
Ajax 对话框支持手动通过 Modal.open
方法按需打开:
js
zui.Modal.open({
url: '/assets/modal/ajax-modal.html',
});
iframe 对话框
在对话框触发按钮上通过 data-type="iframe"
属性指定对话框类型为 iframe 对话框,然后通过 data-url
属性指定对话框内容页面地址。
iframe 对话框支持手动通过 Modal.open
方法按需打开:
js
zui.Modal.open({
type: 'iframe',
url: '/assets/modal/iframe-modal.html',
});
自定义信息提示弹窗
在对话框触发按钮上通过 data-title
属性指定对话框标题,通过 data-content
属性指定对话框内容。
iframe 对话框支持手动通过 Modal.open
方法按需打开:
js
zui.Modal.open({
title: '自定义对话框',
content: '这里是对话框内容',
});
系统对话框
警告框
通过 zui.Modal.alert()
方法可以打开一个警告框,该方法定义如下:
ts
/* 直接指定要提示的消息文本 */
Modal.alert(message: string): Promise<string | undefined>;
/* 通过一个选项对象定义个性化警告框 */
Modal.alert(options: ModalAlertOptions): Promise<string | undefined>;
其中参数定义如下:
message
:要提示的消息文本;options
:一个警告框选项对象ModalAlertOptions
,定义如下:
ts
interface ModalAlertOptions extends ModalCustomOptions {
/* 提示消息 */
message: string | {html: string};
/* 提示消息前的图标名称 */
icon?: string;
/* 提示消息图标类名 */
iconClass?: string;
/* 自定义提示按钮 */
actions?: ToolbarItemOptions[] | string | string[];
/* 当点击提示按钮时的回调函数 */
onClickAction?: (item: ToolbarItemOptions, modal: Modal) => false | void;
}
该方法会通过 Promise
异步返回用户点击的按钮名称。
下面为一个示例:
确认框
通过 Modal.confirm()
方法可以打开一个确认框,该方法定义如下:
ts
/* 直接指定要提示的消息文本 */
Modal.confirm(message: string): Promise<string | undefined>;
/* 通过一个选项对象定义个性化对话框 */
Modal.confirm(options: ModalComfirmOptions): Promise<string | undefined>;
其中参数定义如下:
message
:要提示的消息文本;options
:一个警告框选项对象ModalConfirmOptions
,定义如下:
ts
interface ModalConfirmOptions extends ModalAlertOptions {
/* 当用户点击确认或取消时的回调函数 */
onResult?: (confirmed: boolean, modal: Modal) => void;
}
该方法会通过 Promise
异步返回用户点击的按钮名称。
下面为一个示例: