模态框(Modal)是覆盖在父窗体上的子窗体,位于页面最上层。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互,如查看、创建、编辑、向导等。
API
Modal
| 参数 | 
说明 | 
类型 | 
默认值 | 
| backdrop | 
是否弹出遮罩层/遮罩层点击是否触发关闭 | 
boolean/"static" | 
true | 
| backdropClosable | 
遮罩层点击是否触发关闭 | 
boolean | 
true | 
| keyboard | 
esc触发关闭 | 
boolean | 
- | 
| animation | 
显隐时是否使用动画 | 
boolean | 
true | 
| dialogComponentClass | 
传递给模态框使用的元素 | 
string/element | 
- | 
| dialogClassName | 
传递给模态框的样式 | 
class | 
- | 
| autoFocus | 
自动设置焦点 | 
boolean | 
true | 
| enforceFocus | 
防止打开时焦点离开模态框 | 
boolean | 
- | 
| show | 
是否打开模态框 | 
string | 
- | 
| width | 
模态框宽度,如只传数字则会拼接默认单位 px。例如 100px/100/100%/100rem/100em | 
string/number | 
- | 
| onHide | 
关闭时的钩子函数 | 
function | 
- | 
| size | 
模态框尺寸 | 
sm/lg/xlg | 
- | 
| onEnter | 
开始显示时的钩子函数 | 
function | 
- | 
| onEntering | 
显示时的钩子函数 | 
function | 
- | 
| onEntered | 
显示完成后的钩子函数 | 
function | 
- | 
| onExit | 
隐藏开始时的钩子函数 | 
function | 
- | 
| onExiting | 
隐藏进行时的钩子函数 | 
function | 
- | 
| onExited | 
隐藏结束时的钩子函数 | 
function | 
- | 
| container | 
容器 | 
DOM元素/React组件/或者返回React组件的函数 | 
- | 
| onShow | 
当模态框显示时的钩子函数 | 
function | 
- | 
| renderBackdrop | 
返回背景元素的函数 | 
function | 
- | 
| onEscapeKeyUp | 
响应ESC键时的钩子函数 | 
function | 
- | 
| onBackdropClick | 
点击背景元素的函数 | 
function | 
- | 
| backdropStyle | 
添加到背景元素的style | 
function | 
- | 
| backdropClassName | 
添加到背景元素的class | 
function | 
- | 
| containerClassName | 
添加到外部容器的class | 
function | 
- | 
| transition | 
动画组件 | 
function | 
- | 
| dialogTransitionTimeout | 
设置动画超时时间 | 
function | 
- | 
| backdropTransitionTimeout | 
设置背景动画超时时间 | 
function | 
- | 
| manager | 
管理模态框状态的组件 | 
required | 
- | 
 
Modal.Header
| 参数 | 
说明 | 
类型 | 
默认值 | 
| closeButton | 
是否显示关闭按钮 | 
boolean | 
false | 
 
已支持的键盘操作