Modal 对话框

定义/Definition

对话框通常是包含了某个特定任务或提醒,用来告知用户关键信息,要求用户作出决定或操作。当页操作弹出展示,可承载:提示、数据收集、信息确认、反馈信息、通知展示…

规则 / Rule

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

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

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

代码演示

基本

基本使用方式, 弹出一个浮层

  1. import { Modal, Button, WhiteSpace, WingBlank } from 'antd-mobile';
  2. const App = React.createClass({
  3. getInitialState() {
  4. return { visible: false };
  5. },
  6. showModal() {
  7. this.setState({
  8. visible: true,
  9. });
  10. },
  11. onClose() {
  12. this.setState({
  13. visible: false,
  14. });
  15. },
  16. render() {
  17. return (
  18. <div>
  19. <WhiteSpace size={20} />
  20. <WingBlank>
  21. <Button type="primary" onClick={this.showModal}>
  22. 显示对话框
  23. </Button>
  24. <Modal animated transparent={false} visible={this.state.visible} >
  25. <div style={{ height: '50%', paddingTop: 200 }}>
  26. 这是内容...<br />
  27. 这是内容...<br />
  28. </div>
  29. <Button type="primary" inline onClick={this.onClose}>close modal</Button>
  30. </Modal>
  31. </WingBlank>
  32. <WhiteSpace size={20} />
  33. </div>
  34. );
  35. },
  36. });
  37. ReactDOM.render(
  38. <App />
  39. , mountNode);

自定义

可关闭的浮层

  1. import { Modal, Button, WhiteSpace, WingBlank } from 'antd-mobile';
  2. const App = React.createClass({
  3. getInitialState() {
  4. return { visible: false };
  5. },
  6. showModal() {
  7. this.setState({
  8. visible: true,
  9. });
  10. },
  11. onClose() {
  12. this.setState({
  13. visible: false,
  14. });
  15. },
  16. render() {
  17. return (
  18. <div>
  19. <WhiteSpace size={20} />
  20. <WingBlank>
  21. <Button type="primary" onClick={this.showModal}>
  22. 可关闭对话框
  23. </Button>
  24. <Modal title="1313123" animated={false} transparent closable maskClosable onClose={this.onClose} visible={this.state.visible}>
  25. 这是内容...<br />
  26. 这是内容...<br />
  27. </Modal>
  28. </WingBlank>
  29. <WhiteSpace size={20} />
  30. </div>
  31. );
  32. },
  33. });
  34. ReactDOM.render(
  35. <App />
  36. , mountNode);

弹出框

包含无按钮, 确认框, 多按钮情况

  1. import { Modal, Button, WhiteSpace, WingBlank } from 'antd-mobile';
  2. const alert = Modal.alert;
  3. function showAlert() {
  4. alert('删除', '确定删除么???', [
  5. { text: '取消', onPress: () => console.log('cancel') },
  6. { text: '确定', onPress: () => console.log('ok') },
  7. ]);
  8. }
  9. function showConfirm() {
  10. alert('删除', '确定删除么???', [
  11. { text: '取消', onPress: () => console.log('cancel') },
  12. { text: '确定', onPress: () => console.log('ok') },
  13. ]);
  14. }
  15. function showMoreBtn() {
  16. alert('多个按钮情况', <div>这里有好多个按钮, 你试试</div>, [
  17. { text: '按钮', onPress: () => console.log('第0个按钮被点击了') },
  18. { text: '按钮', onPress: () => console.log('第1个按钮被点击了') },
  19. { text: '按钮', onPress: () => console.log('第2个按钮被点击了') },
  20. { onPress: () => console.log('第3个按钮被点击了') },
  21. ]);
  22. }
  23. const App = React.createClass({
  24. render() {
  25. return (
  26. <div>
  27. <WhiteSpace size={20} />
  28. <WingBlank size={20}>
  29. <Button onClick={showAlert}>自定义按钮 </Button>
  30. </WingBlank>
  31. <WhiteSpace />
  32. <WingBlank size={20}>
  33. <Button onClick={showConfirm}>确认对话框</Button>
  34. </WingBlank>
  35. <WhiteSpace />
  36. <WingBlank size={20}>
  37. <Button onClick={showMoreBtn}>弹出多个按钮 </Button>
  38. </WingBlank>
  39. <WhiteSpace size={20} />
  40. </div>
  41. );
  42. },
  43. });
  44. ReactDOM.render(
  45. <App />
  46. , mountNode);

输入框

包含输入普通文字, 密码, 登录信息样式

  1. import { Modal, Button, WingBlank, WhiteSpace } from 'antd-mobile';
  2. const prompt = Modal.prompt;
  3. function plainTextPrompt() {
  4. prompt('输入名字', '这是名字的 message', [
  5. { text: '取消' },
  6. { text: '提交', onPress: value => console.log(`输入的内容:${value}`) },
  7. ]);
  8. }
  9. function passwordPrompt() {
  10. prompt(
  11. '输入密码',
  12. '这是密码message,可以不要',
  13. password => console.log(`password: ${password}`),
  14. 'secure-text',
  15. );
  16. }
  17. function customBtnPrompt() {
  18. prompt(
  19. '输入密码',
  20. '这是密码message,可以不要',
  21. [
  22. { text: '取消' },
  23. { text: '提交', onPress: password => console.log(`密码为:${password}`) },
  24. ],
  25. 'secure-text',
  26. );
  27. }
  28. function loginPwdPrompt() {
  29. prompt(
  30. '登录',
  31. '输入用户名和密码',
  32. (login, password) => console.log(`login: ${login}, password: ${password}`),
  33. 'login-password',
  34. );
  35. }
  36. let App = React.createClass({
  37. render() {
  38. return (
  39. <div>
  40. <WhiteSpace size={20} />
  41. <WingBlank size={20}>
  42. <Button onClick={plainTextPrompt}>输入框按钮按钮 </Button>
  43. </WingBlank>
  44. <WhiteSpace />
  45. <WingBlank size={20}>
  46. <Button onClick={passwordPrompt}>输入框密码形式 </Button>
  47. </WingBlank>
  48. <WhiteSpace />
  49. <WingBlank size={20}>
  50. <Button onClick={customBtnPrompt}>自定义按钮形式 </Button>
  51. </WingBlank>
  52. <WhiteSpace />
  53. <WingBlank size={20}>
  54. <Button onClick={loginPwdPrompt}>输入框登录形式 </Button>
  55. </WingBlank>
  56. <WhiteSpace size={20} />
  57. </div>
  58. );
  59. },
  60. });
  61. ReactDOM.render(
  62. <App />
  63. , mountNode);

Modal对话框 - 图1

API

Modal web & react native

参数说明类型默认值
prefixCls样式类名前缀Stringam-modal
visible对话框是否可见Booleanfalse
title标题React.Element
closable是否显示右上角的关闭按钮Booleanfalse
maskClosable点击蒙层是否允许关闭Booleanfalse
footer底部内容React.Element
onClose点击 x 或 mask 回调Function
onShowmodal 显示回调Function
animated是否展示动画Booleantrue
transparent是否显示半透明Booleanfalse
style样式Object透明模式下: {width: '286px', height: 'auto'}, 非透明模式: {width: '100%', height: '100%'} (web)

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

参数说明类型默认值
title标题String 或 React.Element
message提示信息String 或 React.Element
actions按钮组, [{text, onpress}]Array

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

参数说明类型默认值
title标题String 或 React.Element
message提示信息String 或 React.Element
callbackOrActions按钮组 [{text, onpress}] 或回调函数Array or Function
typeprompt 的样式String (default, secure-text, login-password)default