# Modal 各种用法集合

- order: 0
- title_en: Modal Usage

---

```js
<NukePlayGround>

  Modal.confirm('是否确认', result => {console.log(result);})

  Modal.prompt('请输入', (result) => {console.log(result);});

  Modal.toast('hello');

  Modal.alert('Hi');

</NukePlayGround>
```

---

```jsx
/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Button from 'nuke-button';
import Modal from 'nuke-modal';
import Page from 'nuke-page';

let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
  }

  alert = () => {
    Modal.alert('Hi');
  };
  confirm = (e) => {
    Modal.confirm('给个评价吧！！', [
      {
        onPress: () => {
          console.log('点击了去看看');
        },
        text: '去看看'
      },
      {
        onPress: () => {
          console.log('点击了以后再说');
        },
        text: '以后再说'
      }
    ]);
  };
  prompt = (e) => {
    Modal.prompt('请输入', (result) => {
      console.log(result);
    });
  };
  toast = () => {
    Modal.toast('hello');
  };
  render() {
    return (
      <Page title="Modal">
        <Page.Intro main="基础使用" />
        <View style={styles.btns}>
          <Button style={styles.btn} block onPress={this.alert} type="primary">
            alert
          </Button>
          <Button style={styles.btn} block onPress={this.confirm} type="primary">
            confirm
          </Button>
          <Button style={styles.btn} block onPress={this.prompt} type="primary">
            prompt
          </Button>
          <Button style={styles.btn} block onPress={this.toast} type="primary">
            toast
          </Button>
        </View>
      </Page>
    );
  }
};
let styles = {
  btns: {
    margin: '30rem'
  },
  btn: {
    marginBottom: '30rem'
  }
};
render(<App />);
```