diff --git a/app.json b/app.json
index 69f6d622..119ecf97 100644
--- a/app.json
+++ b/app.json
@@ -15,7 +15,8 @@
     "example/steps/index",
     "example/namecard/index",
     "example/toast/index",
-    "example/icon/index"
+    "example/icon/index",
+    "example/dialog/index"
   ],
   "window":{
     "navigationBarBackgroundColor": "#FAFAFA",
diff --git a/example/dashboard/index.wxml b/example/dashboard/index.wxml
index 430e2a88..46f9de74 100644
--- a/example/dashboard/index.wxml
+++ b/example/dashboard/index.wxml
@@ -49,6 +49,10 @@
       <view class="zui-cell__bd">Quantity</view>
       <view class="zui-cell__ft"></view>
     </navigator>
+    <navigator class="zui-cell zui-cell--access" url="/example/dialog/index">
+      <view class="zui-cell__bd">Dialog</view>
+      <view class="zui-cell__ft"></view>
+    </navigator>
     <navigator class="zui-cell zui-cell--access" url="/example/toptips/index">
       <view class="zui-cell__bd">Toptips</view>
       <view class="zui-cell__ft"></view>
diff --git a/example/dialog/index.js b/example/dialog/index.js
new file mode 100644
index 00000000..3f7c936f
--- /dev/null
+++ b/example/dialog/index.js
@@ -0,0 +1,20 @@
+var app = getApp()
+
+Page({
+  data: {
+    showDialog: false
+  },
+
+  toggleDialog() {
+    this.setData({
+      showDialog: !this.data.showDialog
+    });
+  },
+
+  onLoad: function () {
+
+  },
+
+  onShow: function() {
+  },
+})
diff --git a/example/dialog/index.wxml b/example/dialog/index.wxml
new file mode 100644
index 00000000..7faacbf8
--- /dev/null
+++ b/example/dialog/index.wxml
@@ -0,0 +1,20 @@
+<view class="container">
+
+  <view class="zui-btns">
+    <button
+      class="zui-btn zui-btn--primary zui-btn--big"
+      bindtap="toggleDialog"
+      style="margin-top: 40vh;"
+    >
+      显示弹层
+    </button>
+  </view>
+
+  <view class="zui-dialog {{ showDialog ? 'zui-dialog--show' : '' }}">
+    <view class="zui-dialog__mask" bindtap="toggleDialog" />
+    <view class="zui-dialog__container">
+      <view style="padding: 100px 0; text-align: center;">内容</view>
+    </view>
+  </view>
+
+</view>