Modal 对话框

定义／Definition

规则 / Rule

• 多个Modal类组件同时被呼起时，会按先后顺序被缓存在队列中，前一个modal关闭后，下一个modal才会打开。

• 使用对话框时需要慎重考虑，因为其特性具有很强的干扰项。非不得已的情况下可以使用原生控件的下拉或展开方式替代。

• 应避免对话框里再弹对话框的情况。

代码演示

基本

import { Modal, Button, WhiteSpace, WingBlank } from 'antd-mobile';
const App = React.createClass({
  getInitialState() {
    return { visible: false };
  },
  showModal() {
    this.setState({
      visible: true,
    });
  },
  onClose() {
    this.setState({
      visible: false,
    });
  },
  render() {
    return (
      <div>
        <WhiteSpace size={20} />
        <WingBlank>
          <Button type="primary" onClick={this.showModal}>
            显示对话框
          </Button>
          <Modal animated transparent={false} visible={this.state.visible} >
            <div style={{ height: '50%', paddingTop: 200 }}>
              这是内容...<br />
              这是内容...<br />
            </div>
            <Button type="primary" inline onClick={this.onClose}>close modal</Button>
          </Modal>
        </WingBlank>
        <WhiteSpace size={20} />
      </div>
    );
  },
});
ReactDOM.render(
  <App />
, mountNode);

自定义

import { Modal, Button, WhiteSpace, WingBlank } from 'antd-mobile';
const App = React.createClass({
  getInitialState() {
    return { visible: false };
  },
  showModal() {
    this.setState({
      visible: true,
    });
  },
  onClose() {
    this.setState({
      visible: false,
    });
  },
  render() {
    return (
      <div>
        <WhiteSpace size={20} />
        <WingBlank>
          <Button type="primary" onClick={this.showModal}>
            可关闭对话框
          </Button>
          <Modal title="1313123" animated={false} transparent closable maskClosable onClose={this.onClose} visible={this.state.visible}>
            这是内容...<br />
            这是内容...<br />
          </Modal>
        </WingBlank>
        <WhiteSpace size={20} />
      </div>
    );
  },
});
ReactDOM.render(
  <App />
, mountNode);

弹出框

import { Modal, Button, WhiteSpace, WingBlank } from 'antd-mobile';
const alert = Modal.alert;
function showAlert() {
  alert('删除', '确定删除么???', [
    { text: '取消', onPress: () => console.log('cancel') },
    { text: '确定', onPress: () => console.log('ok') },
  ]);
}
function showConfirm() {
  alert('删除', '确定删除么???', [
    { text: '取消', onPress: () => console.log('cancel') },
    { text: '确定', onPress: () => console.log('ok') },
  ]);
}
function showMoreBtn() {
  alert('多个按钮情况', <div>这里有好多个按钮, 你试试</div>, [
    { text: '按钮', onPress: () => console.log('第0个按钮被点击了') },
    { text: '按钮', onPress: () => console.log('第1个按钮被点击了') },
    { text: '按钮', onPress: () => console.log('第2个按钮被点击了') },
    { onPress: () => console.log('第3个按钮被点击了') },
  ]);
}
const App = React.createClass({
  render() {
    return (
      <div>
        <WhiteSpace size={20} />
        <WingBlank size={20}>
          <Button onClick={showAlert}>自定义按钮 </Button>
        </WingBlank>
        <WhiteSpace />
        <WingBlank size={20}>
          <Button onClick={showConfirm}>确认对话框</Button>
        </WingBlank>
        <WhiteSpace />
        <WingBlank size={20}>
          <Button onClick={showMoreBtn}>弹出多个按钮 </Button>
        </WingBlank>
        <WhiteSpace size={20} />
      </div>
    );
  },
});
ReactDOM.render(
  <App />
, mountNode);

输入框

import { Modal, Button, WingBlank, WhiteSpace } from 'antd-mobile';
const prompt = Modal.prompt;
function plainTextPrompt() {
  prompt('输入名字', '这是名字的 message', [
    { text: '取消' },
    { text: '提交', onPress: value => console.log(`输入的内容:${value}`) },
  ]);
}
function passwordPrompt() {
  prompt(
    '输入密码',
    '这是密码message,可以不要',
    password => console.log(`password: ${password}`),
    'secure-text',
  );
}
function customBtnPrompt() {
  prompt(
    '输入密码',
    '这是密码message,可以不要',
    [
      { text: '取消' },
      { text: '提交', onPress: password => console.log(`密码为:${password}`) },
    ],
    'secure-text',
  );
}
function loginPwdPrompt() {
  prompt(
    '登录',
    '输入用户名和密码',
    (login, password) => console.log(`login: ${login}, password: ${password}`),
    'login-password',
  );
}
let App = React.createClass({
  render() {
    return (
      <div>
        <WhiteSpace size={20} />
        <WingBlank size={20}>
          <Button onClick={plainTextPrompt}>输入框按钮按钮 </Button>
        </WingBlank>
        <WhiteSpace />
        <WingBlank size={20}>
          <Button onClick={passwordPrompt}>输入框密码形式 </Button>
        </WingBlank>
        <WhiteSpace />
        <WingBlank size={20}>
          <Button onClick={customBtnPrompt}>自定义按钮形式 </Button>
        </WingBlank>
        <WhiteSpace />
        <WingBlank size={20}>
          <Button onClick={loginPwdPrompt}>输入框登录形式 </Button>
        </WingBlank>
        <WhiteSpace size={20} />
      </div>
    );
  },
});
ReactDOM.render(
  <App />
, mountNode);

API

Modal web & react native

Modal.alert(title, message, actions?) web only

Modal.prompt(title?, message?, callbackOrActions, type?) web only