# 基础功能演示

- order: 0

基础功能描述。

---

````jsx
import { Modal, Button } from 'vision-ui';

const onClose_1 = isOK => alert(isOK ? 'OK' : 'Cancel')

const onClose_2 = isOk => {}

const showModal = (type) => {
    switch(type) {
        case 'small':
            return Modal.show(
                <Modal 
                    title="收藏成功"
                    onClose={onClose_2.bind(this)}
                    type='small'
                    okText="知道了">
                    <div className='Modal__simple-txt'>
                        选择影院时，收藏的影院会置顶展示，方便查找
                    </div>
                </Modal>
            );
        default: 
            return Modal.show(
                <Modal 
                    title="购买须知"
                    onClose={onClose_1.bind(this)}
                    okText="确认"
                    backdropCloseable={true}
                    cancelText="取消">
                    <div className='Modal__simple-txt'>
                        内容部分
                    </div>
                </Modal>
            );
    }
}

ReactDom.render(<div className='example'>
    <h1>Modal</h1>
    <h2>全屏</h2>
    <Button onClick={showModal.bind(null, 'small')}>全屏</Button>
    <h2>底部</h2>
    <Button onClick={showModal.bind(null, 'half')}>底部</Button>
</div>, mountNode);
````

<style>
#components-modal-demo-basic {
    position: relative;
}
</style>