Modal Lab

v0.3.11 · Latest stable

Use the top panel to configure modal options. The preview sits in the middle, and the generated code stays below it.

基础内容

场景 删除确认部署确认表单入口自定义id 标题 内容 This action cannot be undone.

尺寸、位置、动画

宽度模式 autopxCSS size宽度 560px 高度模式 autopxCSS size位置 centertopbottom动画 fadeslidezoom

Header 与关闭按钮

hideHeader hideCloseButtoncloseButtonLabel closeButtonText

交互行为

useModal draggabledragHandle headertitlebodyfooterpanelheader + body + footer closeOnEsc closeOnBackdrop

样式与自适应

preset defaultdeploy autoFitSizescrollMode bodyhybridviewportnone refitOnContentChangeautoFitMinWidth autoFitMinHeight

Footer 与诊断

hideFooterfooterAlign startcenterendbetweenconfirmText cancelText confirmAction hidedestroy footerButtonstraceId layoutStableFrames layoutStableOnRefit lifecycle/action hooks

Delete record×

This action cannot be undone.

import { openModal } from 'sodialog'
import 'sodialog/style.css'

openModal({
  title: 'Delete record',
  content: '<p>This action cannot be undone.</p>',
  width: 560,
  traceId: 'trace-modal-lab-001',
})

Modal docsDialog APILegacy Demo ↗