Modal 对话框

规则

• 尽可能少用。Modal 会打断用户操作，只用在重要的时候。

• 标题应该简明，不能超过 1 行；描述内容应该简明、完整，一般不多于 2 行。

• 操作按钮最多到 3 个（竖排），一般为 1-2 个（横排）；3 个以上建议使用组件 ActionSheet 来完成。

• 一般将用户最可能点击的按钮，放在右侧。另外，取消按钮应当始终放在左侧。

代码演示

基本

import { Modal, Button, WhiteSpace, WingBlank } from 'antd-mobile';
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      modal1: false,
      modal2: false,
      modal3: false,
    };
  }
  showModal = key => (e) => {
    // 现象：如果弹出的弹框上的 x 按钮的位置、和手指点击 button 时所在的位置「重叠」起来，
    // 会触发 x 按钮的点击事件而导致关闭弹框 (注：弹框上的取消/确定等按钮遇到同样情况也会如此)
    e.preventDefault(); // 修复 Android 上点击穿透
    this.setState({
      [key]: true,
    });
  }
  onClose = key => () => {
    this.setState({
      [key]: false,
    });
  }
  render() {
    return (
      <div>
        <WhiteSpace />
        <WingBlank>
          <Button onClick={this.showModal('modal1')}>Modal 对话框 (自动检测平台)</Button>
        </WingBlank>
        <WhiteSpace />
        <Modal
          title="这是 title"
          transparent
          maskClosable={false}
          visible={this.state.modal1}
          onClose={this.onClose('modal1')}
          footer={[{ text: '确定', onPress: () => { console.log('ok'); this.onClose('modal1')(); } }]}
        >
          这是内容...<br />
          这是内容...<br />
        </Modal>
        <WingBlank>
          <Button onClick={this.showModal('modal2')}> Modal 对话框 （Android）</Button>
        </WingBlank>
        <WhiteSpace />
        <Modal
          title="这是 title"
          transparent
          maskClosable={false}
          visible={this.state.modal2}
          onClose={this.onClose('modal2')}
          footer={[{ text: '确定', onPress: () => { console.log('ok'); this.onClose('modal2')(); } }]}
          platform="android"
        >
          这是内容...<br />
          这是内容...<br />
        </Modal>
        <WingBlank>
          <Button onClick={this.showModal('modal3')}> Modal 对话框 （iOS）</Button>
        </WingBlank>
        <WhiteSpace />
        <Modal
          title="这是 title"
          transparent
          maskClosable={false}
          visible={this.state.modal3}
          onClose={this.onClose('modal3')}
          footer={[{ text: '确定', onPress: () => { console.log('ok'); this.onClose('modal3')(); } }]}
          platform="ios"
        >
          这是内容...<br />
          这是内容...<br />
        </Modal>
      </div>
    );
  }
}
ReactDOM.render(<App />, mountNode);

警告弹窗

import { Modal, Button, WhiteSpace, WingBlank, Toast } from 'antd-mobile';
const alert = Modal.alert;
const showAlert = () => {
  const alertInstance = alert('删除', '确定删除么???', [
    { text: 'Cancel', onPress: () => console.log('cancel'), style: 'default' },
    { text: 'OK', onPress: () => console.log('ok') },
  ]);
  setTimeout(() => {
    // 可以调用close方法以在外部close
    console.log('auto close');
    alertInstance.close();
  }, 2000);
};
const App = () => (
  <WingBlank size="lg">
    <WhiteSpace size="lg" />
    <Button onClick={showAlert}> 自定义按钮 </Button>
    <WhiteSpace size="lg" />
    <Button onClick={() => alert('删除', '确定删除么???', [
      { text: '取消', onPress: () => console.log('cancel') },
      { text: '确定', onPress: () => console.log('ok') },
    ])}
    >确认对话框</Button>
    <WhiteSpace size="lg" />
    <Button onClick={() => alert('多个按钮情况', <div>这里有好多个按钮, 你试试</div>, [
      { text: '按钮一', onPress: () => console.log('第0个按钮被点击了') },
      { text: '按钮二', onPress: () => console.log('第1个按钮被点击了') },
      { text: '按钮三', onPress: () => console.log('第2个按钮被点击了') },
    ])}
    >弹出多个按钮 </Button>
    <WhiteSpace size="lg" />
    <Button onClick={() => alert('删除', '确定删除么???', [
      { text: '取消', onPress: () => console.log('cancel') },
      {
        text: '确定',
        onPress: () => new Promise((resolve) => {
          Toast.info('onPress Promise', 1);
          setTimeout(resolve, 1000);
        }),
      },
    ])}
    >按钮 Promise</Button>
    <WhiteSpace size="lg" />
  </WingBlank>
);
ReactDOM.render(<App />, mountNode);

输入弹窗

import { Modal, Button, WingBlank, WhiteSpace, Toast } from 'antd-mobile';
const prompt = Modal.prompt;
const App = () => (
  <WingBlank size="lg">
    <WhiteSpace size="lg" />
    <Button onClick={() => prompt('输入名字', '这是名字的 message',
      [
        { text: '取消' },
        {
          text: '提交',
          onPress: value => new Promise((resolve) => {
            Toast.info('onPress promise', 1);
            setTimeout(() => {
              resolve();
              console.log(`value:${value}`);
            }, 1000);
          }),
        },
      ], 'default', null, ['请输入你的名字'])}
    >按钮 Promise</Button>
    <WhiteSpace size="lg" />
    <Button onClick={() => prompt('默认值', '默认值 defaultValue 类型', [
      { text: '取消' },
      { text: '提交', onPress: value => console.log(`输入的内容:${value}`) },
    ], 'plain-text', '100')}
    >输入框默认值 </Button>
    <WhiteSpace size="lg" />
    <Button onClick={() => prompt(
      '输入密码',
      '这是密码message,可以不要',
      password => console.log(`password: ${password}`),
      'secure-text',
    )}
    >输入框密码形式 </Button>
    <WhiteSpace size="lg" />
    <Button onClick={() => prompt(
      '输入密码',
      '这是密码message,可以不要',
      [
        { text: '取消' },
        { text: '提交', onPress: password => console.log(`密码为:${password}`) },
      ],
      'secure-text',
    )}
    >自定义按钮形式 </Button>
    <WhiteSpace size="lg" />
    <Button onClick={() => prompt(
      '登录',
      '输入用户名和密码',
      (login, password) => console.log(`login: ${login}, password: ${password}`),
      'login-password',
      null,
      ['请输入用户名', '请输入密码'],
    )}
    >输入框登录形式 </Button>
    <WhiteSpace size="lg" />
  </WingBlank>
);
ReactDOM.render(<App />, mountNode);

操作弹窗

import { Modal, Button, WhiteSpace, WingBlank } from 'antd-mobile';
const operation = Modal.operation;
const App = () => (
  <WingBlank size="lg">
    <WhiteSpace size="lg" />
    <Button onClick={() => operation([
      { text: '标为未读', onPress: () => console.log('标为未读被点击了') },
      { text: '置顶聊天', onPress: () => console.log('置顶聊天被点击了') },
    ])}
    >操作按钮</Button>
    <WhiteSpace size="lg" />
  </WingBlank>
);
ReactDOM.render(<App />, mountNode);

API

Modal

Modal.alert(title, message, actions?)

Modal.alert(title, message, actions?).close() 可以在外部关闭 Alert

Modal.prompt(title, message, callbackOrActions, type?, defaultValue?)

Modal.operation(actions?)