自定义弹窗
你可以注册自定义模态对话框，并用标准元素 API（openElement、closeElement、disableElements）控制它们。弹窗通过 CustomModal 组件和 ModalContainer 宿主渲染。
UI API
UI.addCustomModal(options)
注册自定义模态对话框。
javascript
/**
* @method UI.addCustomModal
* @param {object} options
* @param {string} options.dataElement 自定义弹窗的唯一名称。
* @param {boolean} [options.disableBackdropClick=false] 禁止点击外部关闭。
* @param {boolean} [options.disableEscapeKeyDown=false] 禁止按 Escape 关闭。
* @param {UI.renderCustomModal} options.render 渲染弹窗内容的函数（可选）。
* @param {object} options.header { title, className, style, children }
* @param {object} options.body { title, className, style, children }
* @param {object} options.footer { title, className, style, children }
*/
UI.addCustomModal({
dataElement: 'myModal',
disableBackdropClick: false,
disableEscapeKeyDown: false,
header: { title: 'My Modal' },
body: { children: [/* … */] },
footer: { children: [/* … */] },
});以已存在的 dataElement 注册弹窗会替换它。内部调用 store.addCustomModal(customModal)，追加到 viewer store 的 customModals 列表。
控制弹窗
注册后，使用其 dataElement 像其他元素一样控制：
javascript
UI.openElement('myModal'); // 显示
UI.closeElement('myModal'); // 隐藏
UI.disableElements(['myModal']); // 完全移除
UI.isElementOpen('myModal'); // => boolean结构
弹窗分为三个可选区域——header、body、footer——每个接受 { title, className, style, children }。也可提供返回 HTMLElement 的 render 函数（UI.renderCustomModal）实现完全自定义内容。
| 区域字段 | 用途 |
|---|---|
title | 区域标题文本。 |
className | 应用于区域的自定义类名。 |
style | 行内样式对象。 |
children | 子描述符/元素数组。 |
示例
确认弹窗
javascript
UI.addCustomModal({
dataElement: 'confirmModal',
disableBackdropClick: true,
header: { title: 'Please confirm' },
body: { title: 'Are you sure you want to continue?' },
footer: {
children: [
{ type: 'actionButton', label: 'Cancel', onClick: () => UI.closeElement('confirmModal') },
{ type: 'actionButton', label: 'OK', onClick: () => { /* … */ UI.closeElement('confirmModal'); } },
],
},
});
UI.openElement('confirmModal');使用自定义 render 函数的弹窗
javascript
UI.addCustomModal({
dataElement: 'customRenderModal',
render: () => {
const el = document.createElement('div');
el.innerHTML = '<h3>Custom</h3><p>Rendered by a function.</p>';
return el;
},
});
UI.openElement('customRenderModal');内部机制
- viewer store 持有
customModals[]列表；addCustomModal按dataElement追加/替换。 CustomModal组件（通过LazyLoadComponents懒加载）渲染每个已注册弹窗。ModalContainer托管弹窗栈，处理背景点击/Escape 关闭（受disableBackdropClick/disableEscapeKeyDown标志控制）。- 可见性由与内置对话框相同的
activeElements/disabledElements映射驱动。