diff --git a/src/components/modal/__snapshots__/index.test.js.snap b/src/components/modal/__snapshots__/index.test.js.snap
index 9411696bd..3ef2c3905 100644
--- a/src/components/modal/__snapshots__/index.test.js.snap
+++ b/src/components/modal/__snapshots__/index.test.js.snap
@@ -6,6 +6,12 @@ exports[`Modal Snap render opened  Modal -- simple 1`] = `"<div class=\\"at-moda
 
 exports[`Modal Snap render opened Modal -- not header 1`] = `"<div class=\\"at-modal at-modal--active\\"><div class=\\"at-modal__overlay\\"></div><div class=\\"at-modal__container\\"><div scrollY class=\\"taro-scroll taro-scroll-view__scroll-y at-modal__content\\">这里是正文内容，欢迎加入京东凹凸实验室 这里是正文内容，欢迎加入京东凹凸实验室 这里是正文内容，欢迎加入京东凹凸实验室</div><div class=\\"at-modal__footer\\"><div class=\\"at-modal__action\\"><button class=\\"weui-btn weui-btn_default\\">undefined取消</button><button class=\\"weui-btn weui-btn_default\\">undefined确定</button></div></div></div></div>"`;
 
+exports[`Modal Snap render opened Modal -- popup 1`] = `"<div class=\\"at-modal\\"><div class=\\"at-modal__overlay\\"></div><div class=\\"at-modal__popup\\"><div class=\\"at-modal__header\\"><span class=\\"taro-text\\">标题</span></div><div scrollY class=\\"taro-scroll taro-scroll-view__scroll-y at-modal__content\\"><div class=\\"content-simple\\"><span class=\\"taro-text\\">欢迎加入京东凹凸实验室&#039;n&#039;r欢迎加入京东凹凸实验室</span></div></div><div class=\\"at-modal__footer at-modal__footer--simple\\"><div class=\\"at-modal__action\\"><button class=\\"weui-btn weui-btn_default\\">undefined取消</button><button class=\\"weui-btn weui-btn_default\\">undefined确认</button></div></div></div></div>"`;
+
+exports[`Modal Snap render opened Modal -- popup animationType 1`] = `"<div class=\\"at-modal\\"><div class=\\"at-modal__overlay\\"></div><div class=\\"at-modal__popup at-modal__popup-slide-up\\"><div class=\\"at-modal__header\\"><span class=\\"taro-text\\">标题</span></div><div scrollY class=\\"taro-scroll taro-scroll-view__scroll-y at-modal__content\\"><div class=\\"content-simple\\"><span class=\\"taro-text\\">欢迎加入京东凹凸实验室&#039;n&#039;r欢迎加入京东凹凸实验室</span></div></div><div class=\\"at-modal__footer at-modal__footer--simple\\"><div class=\\"at-modal__action\\"><button class=\\"weui-btn weui-btn_default\\">undefined取消</button><button class=\\"weui-btn weui-btn_default\\">undefined确认</button></div></div></div></div>"`;
+
+exports[`Modal Snap render opened Modal -- simple 1`] = `"<div class=\\"at-modal\\"><div class=\\"at-modal__overlay\\"></div><div class=\\"at-modal__popup\\"><div class=\\"at-modal__header\\"><span class=\\"taro-text\\">标题</span></div><div scrollY class=\\"taro-scroll taro-scroll-view__scroll-y at-modal__content\\"><div class=\\"content-simple\\"><span class=\\"taro-text\\">欢迎加入京东凹凸实验室&#039;n&#039;r欢迎加入京东凹凸实验室</span></div></div><div class=\\"at-modal__footer at-modal__footer--simple\\"><div class=\\"at-modal__action\\"><button class=\\"weui-btn weui-btn_default\\">undefined取消</button><button class=\\"weui-btn weui-btn_default\\">undefined确认</button></div></div></div></div>"`;
+
 exports[`Modal Snap render opened Modal -- single button 1`] = `"<div class=\\"at-modal at-modal--active\\"><div class=\\"at-modal__overlay\\"></div><div class=\\"at-modal__container\\"><div scrollY class=\\"taro-scroll taro-scroll-view__scroll-y at-modal__content\\">这里是正文内容，欢迎加入京东凹凸实验室 这里是正文内容，欢迎加入京东凹凸实验室 这里是正文内容，欢迎加入京东凹凸实验室</div><div class=\\"at-modal__footer\\"><div class=\\"at-modal__action\\"><button class=\\"weui-btn weui-btn_default\\">undefined确定</button></div></div></div></div>"`;
 
 exports[`Modal Snap render opened Modal 1`] = `"<div class=\\"at-modal at-modal--active\\"><div class=\\"at-modal__overlay\\"></div><div class=\\"at-modal__container\\"><div class=\\"at-modal__header\\">标题</div><div scrollY class=\\"taro-scroll taro-scroll-view__scroll-y at-modal__content\\">这里是正文内容，欢迎加入京东凹凸实验室 这里是正文内容，欢迎加入京东凹凸实验室 这里是正文内容，欢迎加入京东凹凸实验室</div><div class=\\"at-modal__footer\\"><div class=\\"at-modal__action\\"><button class=\\"weui-btn weui-btn_default\\">undefined取消</button><button class=\\"weui-btn weui-btn_default\\">undefined确定</button></div></div></div></div>"`;
diff --git a/src/components/modal/index.js b/src/components/modal/index.js
index 9552ccf42..abf00c2d8 100644
--- a/src/components/modal/index.js
+++ b/src/components/modal/index.js
@@ -71,7 +71,7 @@ export default class AtModal extends AtComponent {
 
   render () {
     const { _isOpened } = this.state
-    const { title, content, cancelText, confirmText } = this.props
+    const { title, content, cancelText, confirmText, popup, animationType } = this.props
 
     const rootClass = classNames(
       'at-modal',
@@ -81,6 +81,21 @@ export default class AtModal extends AtComponent {
       this.props.className
     )
 
+    let isPopUp = false
+
+    if (popup) {
+      isPopUp = true
+      // eslint-disable-next-line no-unused-expressions
+      animationType === 'slide-up' ? 'slide-up' : 'slide-down'
+    }
+    const popUpClass = classNames(
+      {
+        'at-modal__container': !isPopUp,
+        'at-modal__popup': isPopUp,
+        [`at-modal__popup-${animationType}`]: isPopUp && animationType
+      }
+    )
+
     if (title || content) {
       const isRenderAction = cancelText || confirmText
       return (
@@ -89,7 +104,7 @@ export default class AtModal extends AtComponent {
             onClick={this.handleClickOverlay}
             className='at-modal__overlay'
           />
-          <View className='at-modal__container'>
+          <View className={popUpClass}>
             {title && (
               <AtModalHeader>
                 <Text>{title}</Text>
@@ -120,7 +135,7 @@ export default class AtModal extends AtComponent {
     return (
       <View onTouchMove={this.handleTouchMove} className={rootClass}>
         <View className='at-modal__overlay' onClick={this.handleClickOverlay} />
-        <View className='at-modal__container'>{this.props.children}</View>
+        <View className={popUpClass}>{this.props.children}</View>
       </View>
     )
   }
diff --git a/src/components/modal/index.test.js b/src/components/modal/index.test.js
index 4c629ef55..a1993522c 100644
--- a/src/components/modal/index.test.js
+++ b/src/components/modal/index.test.js
@@ -91,6 +91,33 @@ describe('Modal Snap', () => {
     )
     expect(component).toMatchSnapshot()
   })
+
+  it('render opened Modal -- popup', () => {
+    const component = renderToString(
+      <AtModal
+        popup
+        title='标题'
+        cancelText='取消'
+        confirmText='确认'
+        content='欢迎加入京东凹凸实验室\n\r欢迎加入京东凹凸实验室'
+      />
+    )
+    expect(component).toMatchSnapshot()
+  })
+
+  it('render opened Modal -- popup animationType', () => {
+    const component = renderToString(
+      <AtModal
+        popup
+        animationType='slide-up'
+        title='标题'
+        cancelText='取消'
+        confirmText='确认'
+        content='欢迎加入京东凹凸实验室\n\r欢迎加入京东凹凸实验室'
+      />
+    )
+    expect(component).toMatchSnapshot()
+  })
 })
 
 describe('Modal Behavior ', () => {
diff --git a/src/pages/action/modal/index.js b/src/pages/action/modal/index.js
index b4257f980..457eb4d87 100644
--- a/src/pages/action/modal/index.js
+++ b/src/pages/action/modal/index.js
@@ -1,5 +1,5 @@
 import Taro from '@tarojs/taro'
-import { View, Button } from '@tarojs/components'
+import { View, Button, Text, Input } from '@tarojs/components'
 import {
   AtButton,
   AtModal,
@@ -27,7 +27,8 @@ export default class ModalPage extends Taro.Component {
       isOpened2: false,
       isOpened3: false,
       isOpened4: false,
-      isOpened5: false
+      isOpened5: false,
+      isOpened6: false
     }
   }
 
@@ -61,7 +62,7 @@ export default class ModalPage extends Taro.Component {
   }
 
   render () {
-    const { isOpened1, isOpened2, isOpened3, isOpened4, isOpened5 } = this.state
+    const { isOpened1, isOpened2, isOpened3, isOpened4, isOpened5, isOpened6 } = this.state
 
     return (
       <View className='page'>
@@ -116,6 +117,17 @@ export default class ModalPage extends Taro.Component {
             </View>
           </View>
 
+          <View className='panel'>
+            <View className='panel__title'>打开popup</View>
+            <View className='panel__content'>
+              <View className='example-item'>
+                <AtButton onClick={this.handleClick.bind(this, 6)}>
+                  打开popup
+                </AtButton>
+              </View>
+            </View>
+          </View>
+
           {/* 城市索引 */}
           <View className='panel'>
             <View className='panel__title'>城市索引</View>
@@ -204,6 +216,36 @@ export default class ModalPage extends Taro.Component {
           onConfirm={this.closeModalConfirm.bind(this, 4, '点击了确认')}
         />
 
+        {/* Popup */}
+        <AtModal
+          popup
+          animationType='slide-up'
+          isOpened={isOpened6}
+          cancelText='取消'
+          confirmText='确认'
+          onClose={this.closeModal.bind(this, 6, 'Modal被关闭了')}
+          onCancel={this.closeModal.bind(this, 6, '点击了取消')}
+          onConfirm={this.closeModalConfirm.bind(this, 6, '点击了确认')}
+        >
+          <AtModalHeader>完善信息</AtModalHeader>
+          <AtModalContent>
+            <View className='modal-content' style='display:flex; margin:5px;'>
+              <Text style='height:30px; line-height:30px; width:50px; '>姓名:</Text>
+              <Input style='height:30px; line-height:30px; border:1px solid #ddd; margin-left:20px;' />
+            </View>
+            <View className='modal-content' style='display:flex; margin:5px;'>
+              <Text style='height:30px; line-height:30px; width:50px;'>呢称:</Text>
+              <Input style='height:30px; line-height:30px; border:1px solid #ddd; margin-left:20px;' />
+            </View>
+          </AtModalContent>
+          <AtModalAction>
+            <Button onClick={this.closeModal.bind(this, 6, '点击了确定')}>
+              确定
+            </Button>
+          </AtModalAction>
+        </AtModal>
+
+
         <AtModal isOpened={isOpened5}>
           <AtModalContent>
             <AtIndexes list={mockData} topKey='Top'>
diff --git a/src/style/components/modal.scss b/src/style/components/modal.scss
index 0d595cf87..5acfeec7f 100644
--- a/src/style/components/modal.scss
+++ b/src/style/components/modal.scss
@@ -33,6 +33,22 @@ $at-modal-duration: 200ms;
     overflow: hidden;
   }
 
+  &__popup {
+    position: absolute;
+    width: 100%;
+    background: #fff;
+
+    &-slide-down {
+      top: 0;
+    }
+
+    &-slide-up {
+      position: absolute;
+      width: 100%;
+      bottom: 0;
+    }
+  }
+
   &__header {
     @include hairline-bottom-relative($color: $color-grey-4);
     @include line(1);