Modal 模态框

() => {
  const [visible, setvisible] = React.useState(false)
  return (
    <div style={{ margin: '10px' }}>
      <Button type="primary" size={'small'} onClick={() => setvisible(true)}>
        打开
      </Button>
      <Modal
        visible={visible}
        title={'模态框1'}
        onClose={() => setvisible(false)}
      >
        <Modal.Body>
          <span>这是一个模态框1</span>
        </Modal.Body>
        <Modal.Footer>
          <Button
            type="primary"
            size={'small'}
            onClick={() => setvisible(false)}
          >
            关闭
          </Button>
        </Modal.Footer>
      </Modal>
    </div>
  )
}

() => {
  const [visible, setvisible] = React.useState(false)
  return (
    <div style={{ margin: '10px' }}>
      <Button type="primary" size={'small'} onClick={() => setvisible(true)}>
        打开
      </Button>
      <Modal
        visible={visible}
        title={'模态框1'}
        lockScroll
        onClose={() => setvisible(false)}
      >
        <Modal.Body>
          <span>这是一个模态框2</span>
        </Modal.Body>
        <Modal.Footer>
          <Button
            type="primary"
            size={'small'}
            onClick={() => setvisible(false)}
          >
            关闭
          </Button>
        </Modal.Footer>
      </Modal>
    </div>
  )
}

() => {
  const [visible, setvisible] = React.useState(false)
  return (
    <div style={{ margin: '10px' }}>
      <Button type="primary" size={'small'} onClick={() => setvisible(true)}>
        打开
      </Button>
      <Modal
        visible={visible}
        title={'模态框3'}
        mask
        closeOnClickModal={true}
        onClose={() => setvisible(false)}
      >
        <Modal.Body>
          <span>这是一个模态框3</span>
        </Modal.Body>
        <Modal.Footer>
          <Button
            type="primary"
            size={'small'}
            onClick={() => setvisible(false)}
          >
            关闭
          </Button>
        </Modal.Footer>
      </Modal>
    </div>
  )
}