diff --git a/examples/routers/modal.vue b/examples/routers/modal.vue
index 680b527..0ff08dd 100644
--- a/examples/routers/modal.vue
+++ b/examples/routers/modal.vue
@@ -1,18 +1,67 @@
 <template>
     <div>
-        {{ val }}
-        <Button @click="confirm">标准</Button>
-        <Button @click="custom">自定义按钮文字</Button>
-        <Button @click="async">异步关闭</Button>
         <Button type="primary" @click="modal1 = true">显示对话框</Button>
         <Modal
                 v-model="modal1"
+                width="70"
                 title="普通的Modal对话框标题"
                 @on-ok="ok"
                 @on-cancel="cancel">
-            <p>对话框内容</p>
-            <p>对话框内容</p>
-            <p>对话框内容</p>
+            <div>
+                <Form :model="formItem" :label-width="80">
+                    <Form-item label="输入框">
+                        <Input v-model="formItem.input" placeholder="请输入"></Input>
+                    </Form-item>
+                    <Form-item label="选择器">
+                        <Select v-model="formItem.select" placeholder="请选择">
+                            <Option value="beijing">北京市</Option>
+                            <Option value="shanghai">上海市</Option>
+                            <Option value="shenzhen">深圳市</Option>
+                        </Select>
+                    </Form-item>
+                    <Form-item label="日期控件">
+                        <Row>
+                            <Col span="11">
+                            <Date-picker type="date" placeholder="选择日期" v-model="formItem.date"></Date-picker>
+                            </Col>
+                            <Col span="2" style="text-align: center">-</Col>
+                            <Col span="11">
+                            <Time-picker type="time" placeholder="选择时间" v-model="formItem.time"></Time-picker>
+                            </Col>
+                        </Row>
+                    </Form-item>
+                    <Form-item label="单选框">
+                        <Radio-group v-model="formItem.radio">
+                            <Radio label="male">男</Radio>
+                            <Radio label="female">女</Radio>
+                        </Radio-group>
+                    </Form-item>
+                    <Form-item label="多选框">
+                        <Checkbox-group v-model="formItem.checkbox">
+                            <Checkbox label="吃饭"></Checkbox>
+                            <Checkbox label="睡觉"></Checkbox>
+                            <Checkbox label="跑步"></Checkbox>
+                            <Checkbox label="看电影"></Checkbox>
+                        </Checkbox-group>
+                    </Form-item>
+                    <Form-item label="开关">
+                        <Switch v-model="formItem.switch" size="large">
+                            <span slot="open">开启</span>
+                            <span slot="close">关闭</span>
+                        </Switch>
+                    </Form-item>
+                    <Form-item label="滑块">
+                        <Slider v-model="formItem.slider" range></Slider>
+                    </Form-item>
+                    <Form-item label="文本域">
+                        <Input v-model="formItem.textarea" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
+                    </Form-item>
+                    <Form-item>
+                        <Button type="primary">提交</Button>
+                        <Button type="ghost" style="margin-left: 8px">取消</Button>
+                    </Form-item>
+                </Form>
+            </div>
         </Modal>
     </div>
 </template>
@@ -20,8 +69,25 @@
     export default {
         data () {
             return {
+                formItem: {
+                    input: '',
+                    select: '',
+                    radio: 'male',
+                    checkbox: [],
+                    switch: true,
+                    date: '',
+                    time: '',
+                    slider: [20, 50],
+                    textarea: ''
+                },
                 modal1: false,
-                val: ''
+                model13: '',
+                loading1: false,
+                options1: [],
+                model14: [],
+                loading2: false,
+                options2: [],
+                list: ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New hampshire', 'New jersey', 'New mexico', 'New york', 'North carolina', 'North dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode island', 'South carolina', 'South dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West virginia', 'Wisconsin', 'Wyoming']
             }
         },
         methods: {
@@ -31,51 +97,22 @@
             cancel () {
                 this.$Message.info('点击了取消');
             },
-            confirm () {
-                this.$Modal.confirm({
-                    title: '确认对话框标题',
-                    content: '<p>一些对话框内容</p><p>一些对话框内容</p>',
-                    render: (h) => {
-                        return h('Input', {
-                            props: {
-                                value: this.val,
-                                autofocus: true
-                            },
-                            on: {
-                                input: (val) => {
-                                    this.val = val;
-                                }
-                            }
-                        }, '一个按钮')
-                    },
-                    onOk: () => {
-                        this.$Message.info('点击了确定');
-                    },
-                    onCancel: () => {
-                        this.$Message.info('点击了取消');
-                    }
-                });
-            },
-            custom () {
-                this.$Modal.confirm({
-                    title: '确认对话框标题',
-                    content: '<p>一些对话框内容</p><p>一些对话框内容</p>',
-                    okText: 'OK',
-                    cancelText: 'Cancel'
-                });
-            },
-            async () {
-                this.$Modal.confirm({
-                    title: '确认对话框标题',
-                    content: '<p>对话框将在 2秒 后关闭</p>',
-                    loading: true,
-                    onOk: () => {
-                        setTimeout(() => {
-                            this.$Modal.remove();
-                            this.$Message.info('异步关闭了对话框');
-                        }, 2000);
-                    }
-                });
+            remoteMethod1 (query) {
+                if (query !== '') {
+                    this.loading1 = true;
+                    setTimeout(() => {
+                        this.loading1 = false;
+                        const list = this.list.map(item => {
+                            return {
+                                value: item,
+                                label: item
+                            };
+                        });
+                        this.options1 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
+                    }, 200);
+                } else {
+                    this.options1 = [];
+                }
             }
         }
     }
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index 17440cb..037a9f0 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -121,8 +121,9 @@
             mainStyles () {
                 let style = {};
 
+                const width = parseInt(this.width);
                 const styleWidth = {
-                    width: `${this.width}px`
+                    width: width <= 100 ? `${width}%` : `${width}px`
                 };
 
                 const customStyle = this.styles ? this.styles : {};
--
libgit2 0.21.4