Method render

docs/src/js/pages/modal.jsx:47–200

()

  }

  render () {
    return (
      <div>
        <div className="header">
          <h1>Modal</h1>
          <h2>对话框</h2>
        </div>

        <div className="content">
          <Code>
{`<Modal
  clickaway: {bool},         // 为 true 时，点击页面空白部分关闭Modal，默认值为 false
  width={700}                // 宽度，默认值为 500
  header={string|element}    // 标题，值为 string 或者 ReactElement，可为空
  isOpen={bool}              // 是否打开
  onClose={function}         // 关闭Modal时触发
  buttons: {
    {text}: func|string      // text 为按钮文字，func 返回 true 或者值为 true，关闭 Modal
                             // func 可以设置为string，当func === 'submit' 时，会触发children下的form的submit事件
  }
>
  {children}                 // 内容，任意对象
</Modal>
`}
          </Code>

          <Example>
<Modal width={700} header="一个弹出表单"
  isOpen={this.state.modalIsOpen}
  onClose={() => this.setState({ modalIsOpen: false })}
  buttons={{
    '确定': 'submit',
    '取消': true
  }}>
  <div>
    <Form onSubmit={
      (data) => {
        alert(JSON.stringify(data));
        this.setState({ modalIsOpen: false })
      }} layout="aligned">
      <FormControl name="name" grid={7/8} required={true} label="姓名" type="text" />
      <FormControl name="birthday" required={true} label="生日" type="date" />
      <FormControl name="description" grid={7/8} label="简介" type="textarea" rows={6} />
    </Form>
  </div>
</Modal>
<Button status="primary" onClick={ () => this.setState({ modalIsOpen: true }) }>open form</Button>
          </Example>

          <div><em>Modal</em> Modal提供了一个静态方法，供任意位置调用。open会返回一个id，供close调用</div>
          <h2 className="subhead">Modal.open(options)</h2>
          <Code>
{`options = {
  clickaway: {bool},         // 为 true 时，点击页面空白部分关闭Modal，默认值为 false
  header: {string|element},  // 标题，值为 string 或者 ReactElement，可为空
  content: {string|element}, // 内容，值为 string 或者 ReactElement，必填
  width: {int|string},       // 宽度，默认值为 500
  onClose: function,         // 当Modal关闭时触发