# 对话框

- order: 0

可以自由定义样式。

---

```js
/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import ScrollView from 'nuke-scroll-view';
import Dialog from 'nuke-dialog';
import Button from 'nuke-button';
import Page from 'nuke-page';

let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.hideModal = this.hideModal.bind(this);
  }

  showModal = () => {
    this.refs.modal1.wrappedInstance.show();
  };
  hideModal() {
    // alert(10);
    this.refs.modal1.wrappedInstance.hide();
  }
  hideModalAndConfirm = () => {
    console.log('confirm');
    this.refs.modal1.wrappedInstance.hide();
  };
  onShow = () => {
    console.log('modal show');
  };

  onHide = () => {
    console.log('modal hide');
  };
  onMaskPress = () => {
    this.refs.modal1.wrappedInstance.hide();
  };

  render() {
    return (
      <Page title="Dialog Static">
        <View style={{ height: '2000rem' }}>
          <Button type="primary" onPress={this.showModal}>
            点击打开对话框，可以点击遮罩层关闭
          </Button>
        </View>
        <Dialog
          ref="modal1"
          duration={1000}
          maskClosable={true}
          contentStyle={styles.modalStyle}
          onShow={this.onShow}
          onHide={this.onHide}
          onMaskPress={this.onMaskPress}>
          <View style={styles.body}>
            <View style={styles.head}>
              <Text style={styles.textHead}>确定吗？</Text>
            </View>
            <View style={styles.tips}>
              <Text style={styles.text}>
                此操作不此操作不可逆此操作不可逆此操作不可逆此操作不可逆此操作不可逆此操作不可逆此操作不可逆此操作不可逆此操作不可逆可逆，是否继续
              </Text>
            </View>
          </View>
          <View style={styles.footer}>
            <Button style={[styles.dlgBtn, styles.dlgBtnLeft]} type="normal" onPress={this.hideModal}>
              取消
            </Button>
            <Button style={styles.dlgBtn} type="normal" onPress={this.hideModalAndConfirm}>
              确定
            </Button>
          </View>
        </Dialog>
      </Page>
    );
  }
};
var styles = {
  wrapper: {
    paddingLeft: '24rem',
    paddingRight: '24rem',
    paddingTop: '24rem',
    backgroundColor: '#f4f4f4'
  },
  click: {
    height: '100rem',
    lineHeight: '100rem',
    textAlign: 'center',
    borderWidth: '1rem',
    borderStyle: 'solid',
    borderColor: '#ccc'
  },
  modalStyle: {
    width: '578rem',
    height: 364,
    borderTopColor: '#3089dc',
    borderTopStyle: 'solid',
    borderTopWidth: '8rem',
    borderRadius: '8rem',
    justifyContent: 'flex-end'
  },
  body: {
    flex: 1,
    paddingLeft: 40,
    paddingRight: 40,
    paddingTop: 30,
    // justifyContent: 'center',
    borderRadius: '8rem',
    backgroundColor: '#ffffff'
  },
  head: {
    height: 50,
    alignItems: 'center',
    justifyContent: 'center'
  },
  textHead: {
    color: '#3d4145',
    fontSize: 32
  },
  tips: {},
  text: {
    fontSize: '28rem',
    lines: 3,
    [`-webkit-line-clamp`]: 3,
    overflow: 'hidden',
    height: '120rem',
    lineHeight: '40rem',
    color: '#60646e',
    textOverflow: 'ellipsis'
  },
  footer: {
    borderTopColor: '#dddddd',
    flexDirection: 'row',
    borderTopStyle: 'solid',
    borderTopWidth: 1,
    // alignItems: 'center',
    // justifyContent: 'flex-end',
    height: 94
  },
  dlgBtn: {
    flex: 1,
    borderWidth: 0,
    color: '#3089dc',
    backgroundColor: 'transparent'
  },
  dlgBtnLeft: {
    borderRightStyle: 'solid',
    borderRightWidth: 1,
    borderRightColor: '#dddddd'
  },
  dlgBtnSeperator: {
    color: '#dddddd',
    height: 94
  }
};
render(<App />);
```