Modal

一个基本的 Modal 示例 #

一个 modal 由 header,body,和含一系列功能的 footer 组成.使用 <Modal /> 标签和其他组件来显示或者隐藏你的 Modal. <Modal /> 标签含有一些子标签: <Modal.Header /> , <Modal.Title /> , <Modal.Body /> 和 <Modal.Footer />.通过这些标签,你可以生成一个你想要的 Modal 内容.

阻碍式 Modal #

在 <Modal /> 标签中添加 backdrop="static" 属性,可以让生成的 Modal 带一个阻碍式的背景幕布.

Props #

Modal #

名称	类型	缺省值	描述
animation	boolean	true	打开或隐藏 Modal 时是否使用动画效果
autoFocus	boolean		当为 `true` 的时候, Modal 显示的时候会自动获取焦点.
backdrop	以下之一:`"static"` , `true` , `false`		添加一个背景幕布组件.特别当为 `"static"` 时,点击幕布时不会触发 `onHide`.
bsSize	以下之一:`"large"` , `"small"`		组件的尺寸大小
show	boolean		但 `true` 时显示 Modal
onHide	function		隐藏 Modal 的函数,当点击 header 上得 closeButton 或者非 static 的背景幕布(backdrop)时被调用.
keyboard	boolean		当为 `true`是时,按下键盘上 escape 按键时关闭 Modal.
enforceFocus	boolean		当 `true` 时,在 Modal 显示期间强制 Modal 获取焦点.

Modal.Header #

名称	类型	缺省值	描述
closeButton	boolean	false	生成一个用来关闭 Modal 的"X"号按钮.

组件参考 #

React-Bootstrap 官方文档: http://react-bootstrap.github.io/components.html#modals

← Prev Next →