diff --git a/src/packages/popup/demos/h5/demo5.tsx b/src/packages/popup/demos/h5/demo5.tsx
index 1547e898ae..338b7d2927 100644
--- a/src/packages/popup/demos/h5/demo5.tsx
+++ b/src/packages/popup/demos/h5/demo5.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { Popup, Cell } from '@nutui/nutui-react'
 
-const Demo4 = () => {
+const Demo5 = () => {
   const [showBottomRound, setShowBottomRound] = useState(false)
 
   return (
@@ -24,4 +24,4 @@ const Demo4 = () => {
     </>
   )
 }
-export default Demo4
+export default Demo5
diff --git a/src/packages/popup/demos/h5/demo6.tsx b/src/packages/popup/demos/h5/demo6.tsx
index 175e861647..09c573712b 100644
--- a/src/packages/popup/demos/h5/demo6.tsx
+++ b/src/packages/popup/demos/h5/demo6.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { Popup, Cell } from '@nutui/nutui-react'
 
-const Demo5 = () => {
+const Demo6 = () => {
   const [showMountNode, setShowMountNode] = useState(false)
 
   return (
@@ -25,4 +25,4 @@ const Demo5 = () => {
     </>
   )
 }
-export default Demo5
+export default Demo6
diff --git a/src/packages/popup/demos/h5/demo7.tsx b/src/packages/popup/demos/h5/demo7.tsx
index 6ad34405fb..a48827c66c 100644
--- a/src/packages/popup/demos/h5/demo7.tsx
+++ b/src/packages/popup/demos/h5/demo7.tsx
@@ -1,9 +1,10 @@
 import React, { useState } from 'react'
-import { Popup, Cell } from '@nutui/nutui-react'
+import { Popup, Cell, Dialog } from '@nutui/nutui-react'
 
-const Demo6 = () => {
+const Demo7 = () => {
   const [showMutiple, setShowMutiple] = useState(false)
   const [showMutipleInner, setShowMutipleInner] = useState(false)
+  const [showDialog, setShowDialog] = useState(false)
 
   return (
     <>
@@ -44,7 +45,37 @@ const Demo6 = () => {
           close
         </span>
       </Popup>
+
+      <Cell
+        title="PopUp + Dialog"
+        onClick={() => {
+          setShowDialog(true)
+        }}
+      />
+
+      <Popup
+        closeable
+        visible={showDialog}
+        style={{ height: '100%' }}
+        position="bottom"
+        onClose={() => {
+          setShowDialog(false)
+        }}
+      >
+        <Cell
+          title="打开 Dialog"
+          style={{ margin: '20% 20px', width: '80%' }}
+          onClick={() =>
+            Dialog.alert({
+              title: '提示',
+              content: '支持函数调用和组件调用两种方式。',
+              hideCancelButton: true,
+              confirmText: '确认',
+            })
+          }
+        />
+      </Popup>
     </>
   )
 }
-export default Demo6
+export default Demo7
diff --git a/src/packages/popup/demos/taro/demo5.tsx b/src/packages/popup/demos/taro/demo5.tsx
index 8073c464ed..ef25d7c0e3 100644
--- a/src/packages/popup/demos/taro/demo5.tsx
+++ b/src/packages/popup/demos/taro/demo5.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { Popup, Cell } from '@nutui/nutui-react-taro'
 
-const Demo4 = () => {
+const Demo5 = () => {
   const [showBottomRound, setShowBottomRound] = useState(false)
 
   return (
@@ -24,4 +24,4 @@ const Demo4 = () => {
     </>
   )
 }
-export default Demo4
+export default Demo5
diff --git a/src/packages/popup/demos/taro/demo6.tsx b/src/packages/popup/demos/taro/demo6.tsx
index 1d58647cce..e1358d7029 100644
--- a/src/packages/popup/demos/taro/demo6.tsx
+++ b/src/packages/popup/demos/taro/demo6.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { Popup, Cell } from '@nutui/nutui-react-taro'
 
-const Demo5 = () => {
+const Demo6 = () => {
   const [showMountNode, setShowMountNode] = useState(false)
 
   return (
@@ -25,4 +25,4 @@ const Demo5 = () => {
     </>
   )
 }
-export default Demo5
+export default Demo6
diff --git a/src/packages/popup/demos/taro/demo7.tsx b/src/packages/popup/demos/taro/demo7.tsx
index dd36b792d8..eec696c47b 100644
--- a/src/packages/popup/demos/taro/demo7.tsx
+++ b/src/packages/popup/demos/taro/demo7.tsx
@@ -1,9 +1,10 @@
 import React, { useState } from 'react'
-import { Popup, Cell } from '@nutui/nutui-react-taro'
+import { Popup, Cell, Dialog } from '@nutui/nutui-react-taro'
 
-const Demo6 = () => {
+const Demo7 = () => {
   const [showMutiple, setShowMutiple] = useState(false)
   const [showMutipleInner, setShowMutipleInner] = useState(false)
+  const [showDialog, setShowDialog] = useState(false)
 
   return (
     <>
@@ -13,6 +14,7 @@ const Demo6 = () => {
           setShowMutiple(true)
         }}
       />
+
       <Popup
         visible={showMutiple}
         style={{ padding: '30px 50px' }}
@@ -44,7 +46,41 @@ const Demo6 = () => {
           close
         </span>
       </Popup>
+
+      <Cell
+        title="PopUp + Dialog"
+        onClick={() => {
+          setShowDialog(true)
+        }}
+      />
+
+      <Popup
+        closeable
+        visible={showDialog}
+        style={{ height: '100%' }}
+        position="bottom"
+        onClose={() => {
+          setShowDialog(false)
+        }}
+      >
+        <Cell
+          title="打开 Dialog"
+          style={{ margin: '20% 20px', width: '80%' }}
+          onClick={() =>
+            Dialog.open('test', {
+              title: 'Dialog',
+              content: '可通过 Dialog.open 打开对话框',
+              onConfirm: () => {
+                Dialog.close('test')
+              },
+              onCancel: () => {
+                Dialog.close('test')
+              },
+            })
+          }
+        />
+      </Popup>
     </>
   )
 }
-export default Demo6
+export default Demo7
diff --git a/src/packages/popup/demos/taro/demo8.tsx b/src/packages/popup/demos/taro/demo8.tsx
index 5b8aa04f6a..38d6895dcb 100644
--- a/src/packages/popup/demos/taro/demo8.tsx
+++ b/src/packages/popup/demos/taro/demo8.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { Popup, Cell } from '@nutui/nutui-react-taro'
 import { ScrollView } from '@tarojs/components'
 
-const Demo6 = () => {
+const Demo8 = () => {
   const [scrollPenetration, setScrollPenetration] = useState(false)
 
   return (
@@ -25,4 +25,4 @@ const Demo6 = () => {
     </>
   )
 }
-export default Demo6
+export default Demo8