Modal

npm: sodialog

CDN 复制说明：生产示例固定当前文档版本，不建议使用 @latest。

css: https://cdn.jsdelivr.net/npm/[email protected]/dist/sodialog.css

js: https://cdn.jsdelivr.net/npm/[email protected]/dist/sodialog.es.js

Modal Basic Demo

Open in New Tab

Source Code

Modal Promise Flow Demo

Open in New Tab

Source Code

Level 1. Basic Usage

基础打开

import { openModal } from 'sodialog'

openModal({
  title: '基础示例',
  content: '<p>这是 Modal 的基础示例。</p>',
  width: 640,
  height: '70vh',
  confirmText: '确认',
  cancelText: '取消',
})

width 和 height 支持数字（按 px）或 CSS 尺寸字符串；设置任一尺寸后，将关闭自动尺寸适配并优先采用显式尺寸。

Modal 預設可按住 header 拖動。需要關閉時傳 draggable: false；需要讓 body 或 footer 也能拖動時傳 dragHandle: ['header', 'body', 'footer']。

Level 2. Add lifecycle and tracing

布局稳定钩子与 trace

import { openDialog, pushMessage } from 'sodialog'

openDialog({
  title: '稳定时机示例',
  content: '<p>观察 onLayoutStable 与 action 回调输出。</p>',
  traceId: 'trace-modal-lab-001',
  onLayoutStable: ({ traceId }) => {
    pushMessage('success', '布局已稳定', { traceId, duration: 1300 })
  },
  onAction: ({ action, traceId }) => {
    console.log(action, traceId)
  },
})

預設風格

openModal({
  title: 'Ready to deploy',
  content: '<p>All checks passed. Production is ready.</p>',
  preset: 'deploy',
  confirmText: 'Deploy now',
  cancelText: 'Cancel',
})

preset: 'deploy' 使用標準樣式裡的 sod-preset-deploy 類別實作，不引入額外依賴，也仍可用 --sod-* 變數覆蓋。

Level 3. Promise flow composition

Promise 组合流程

import { confirmModal, promptModal, formModal, pushMessage } from 'sodialog'

const ok = await confirmModal({
  title: '确认',
  content: '<p>继续执行串行流程？</p>',
})
if (!ok) return

const note = await promptModal({ title: '输入备注', placeholder: '请输入内容' })
if (note === null) return

await formModal({
  title: '补充信息',
  fields: [{ name: 'owner', label: '负责人', required: true }],
})

pushMessage('info', `流程完成，备注：${note}`, {
  duration: 1400,
  traceId: 'trace-modal-lab-001',
})

Level 4. Configure defaults

全局默认配置

import { configureDialog, openModal } from 'sodialog'

configureDialog({
  modalDefaults: {
    footerAlign: 'center',
    closeOnEsc: false,
  },
})

openModal({
  title: '默认配置生效验证',
  content: '<p>本次调用未传 footerAlign/closeOnEsc。</p>',
})

Related API

• Dialog API
• Adapter API

更多可视化示例见 Examples Hub。