diff --git a/CustomDialogPractice/README.md b/CustomDialogPractice/README.md
index 92409377b5fd5165a97199933acf46b4ff5ac3b0..1c841ae9cb8f2d556cbb8a6aab343eb036f5e13c 100644
--- a/CustomDialogPractice/README.md
+++ b/CustomDialogPractice/README.md
@@ -31,7 +31,7 @@
 │  │  ├──InterceptReturn01.ets                          // 拦截物理返回按钮、手势滑动关闭弹窗示例一
 │  │  └──InterceptReturn02.ets                          // 拦截物理返回按钮、手势滑动关闭弹窗示例二
 │  └──utils.ets
-│     └──DialogComponent.ets                            // 自定义弹窗封装组件
+│     └──PromptActionClass.ets                            // 自定义弹窗封装Class
 └──entry/src/main/resources                             // 应用资源目录
 ``` 
 ## 使用说明
diff --git a/CustomDialogPractice/README_EN.md b/CustomDialogPractice/README_EN.md
index 79f38407b1ccab658a17479c226df83096d16f9e..4f1dd0324e25d37506b24f5c493340e844f7082d 100644
--- a/CustomDialogPractice/README_EN.md
+++ b/CustomDialogPractice/README_EN.md
@@ -31,7 +31,7 @@ On some permission configuration pages, when a user accesses an application for
 │  │  ├──InterceptReturn01.ets                          // Example 1 of blocking to close a dialog box through the Back button or swiping
 │  │  └──InterceptReturn02.ets                          // Example 2 of blocking to close a dialog box through the Back button or swiping
 │  └──utils.ets
-│     └──DialogComponent.ets                            // Encapsulated custom dialog box component
+│     └──PromptActionClass.ets                            // Encapsulated custom dialog box class
 └──entry/src/main/resources                             // Application resources
 ``` 
 ## How to Use
diff --git a/CustomDialogPractice/entry/src/main/ets/pages/CustomDialogDisplayAndExitAnimations.ets b/CustomDialogPractice/entry/src/main/ets/pages/CustomDialogDisplayAndExitAnimations.ets
index 1cf7894822ca2e4059603067e94a9f71ef9e9b2d..8cd016df21300a395060b3e6ea270d8b33d673db 100644
--- a/CustomDialogPractice/entry/src/main/ets/pages/CustomDialogDisplayAndExitAnimations.ets
+++ b/CustomDialogPractice/entry/src/main/ets/pages/CustomDialogDisplayAndExitAnimations.ets
@@ -13,6 +13,7 @@
  * limitations under the License.
  */
 
+// DocsCode 1
 import { PromptAction } from '@kit.ArkUI';
 
 @Component
@@ -103,4 +104,6 @@ export struct CustomDialogDisplayAndExitAnimations {
       .justifyContent(FlexAlign.End)
     }
   }
-}
\ No newline at end of file
+}
+
+// DocsCode 1
\ No newline at end of file
diff --git a/CustomDialogPractice/entry/src/main/ets/pages/CustomDialogNotDisappear.ets b/CustomDialogPractice/entry/src/main/ets/pages/CustomDialogNotDisappear.ets
index 696f1df94dff52118c2c68f068bd92f9e4da817c..6da504fa756717d38867c79dfcd5afaf336e0edb 100644
--- a/CustomDialogPractice/entry/src/main/ets/pages/CustomDialogNotDisappear.ets
+++ b/CustomDialogPractice/entry/src/main/ets/pages/CustomDialogNotDisappear.ets
@@ -13,6 +13,7 @@
  * limitations under the License.
  */
 
+// DocsCode 1
 @Component
 export struct CustomDialogNotDisappear {
   @Consume('NavPathStack') pageStack: NavPathStack;
@@ -127,8 +128,8 @@ export struct PageOne {
         }
         .backgroundColor('#F1F3F5')
         .padding({
-            left: 16,
-            right: 16
+          left: 16,
+          right: 16
         })
         .height('100%')
         .width('100%')
@@ -138,6 +139,7 @@ export struct PageOne {
     }
     .backgroundColor('#F1F3F5')
     .hideTitleBar(true)
-    .mode(NavDestinationMode.DIALOG)
   }
-}
\ No newline at end of file
+}
+
+// DocsCode 1
\ No newline at end of file
diff --git a/CustomDialogPractice/entry/src/main/ets/pages/GlobalDialogDecoupledFromThePage.ets b/CustomDialogPractice/entry/src/main/ets/pages/GlobalDialogDecoupledFromThePage.ets
index 74bd700b539beab38c1d710f901782e7eb9e2c88..7736b1b52722e3e0e54087074e2202f052eb41d4 100644
--- a/CustomDialogPractice/entry/src/main/ets/pages/GlobalDialogDecoupledFromThePage.ets
+++ b/CustomDialogPractice/entry/src/main/ets/pages/GlobalDialogDecoupledFromThePage.ets
@@ -13,18 +13,18 @@
  * limitations under the License.
  */
 
+// DocsCode 1
 import { PromptActionClass } from '../uitls/PromptActionClass';
 import { ComponentContent } from '@kit.ArkUI';
 
 class Params {
-  text: string = ""
+  text: string = '';
 
   constructor(text: string) {
     this.text = text;
   }
 }
 
-
 @Builder
 function buildText(params: Params) {
   Column() {
@@ -45,7 +45,7 @@ function buildText(params: Params) {
       .fontColor('#0A59F7')
       .backgroundColor(Color.White)
       .onClick(() => {
-        PromptActionClass.closeDialog();
+        PromptActionClass.closeDialog(); // Close customDialog.
       })
       .width('100%')
       .margin({
@@ -66,7 +66,7 @@ function buildText(params: Params) {
 
 @Component
 export struct GlobalDialogDecoupledFromThePage {
-  @State message: string = "This is a dialog content.";
+  @State message: string = 'This is a dialog content.';
   private ctx: UIContext = this.getUIContext();
   private contentNode: ComponentContent<Object> =
     new ComponentContent(this.ctx, wrapBuilder(buildText), new Params(this.message));
@@ -88,7 +88,7 @@ export struct GlobalDialogDecoupledFromThePage {
             .margin({ bottom: 16 })
             .backgroundColor('#0A59F7')
             .onClick(() => {
-              PromptActionClass.openDialog();
+              PromptActionClass.openDialog(); // Open customDialog.
             })
         }
         .width('100%')
@@ -103,4 +103,6 @@ export struct GlobalDialogDecoupledFromThePage {
       .justifyContent(FlexAlign.End)
     }
   }
-}
\ No newline at end of file
+}
+
+// DocsCode 1
\ No newline at end of file
diff --git a/CustomDialogPractice/entry/src/main/ets/pages/InterceptReturn01.ets b/CustomDialogPractice/entry/src/main/ets/pages/InterceptReturn01.ets
index e18f8fa22f538a2892d3396a1e3a53ee576a0fa9..20e4351c2de25221dd99313d9718d948347a424b 100644
--- a/CustomDialogPractice/entry/src/main/ets/pages/InterceptReturn01.ets
+++ b/CustomDialogPractice/entry/src/main/ets/pages/InterceptReturn01.ets
@@ -13,6 +13,7 @@
  * limitations under the License.
  */
 
+// DocsCode 1
 import { PromptAction } from '@kit.ArkUI';
 import { hilog } from '@kit.PerformanceAnalysisKit';
 
@@ -83,7 +84,7 @@ export struct InterceptReturn01 {
                 alignment: DialogAlignment.Center,
                 maskColor: 'rgba(0, 0, 0, 0.2)',
                 onWillDismiss: (dismissDialogAction: DismissDialogAction) => {
-                  hilog.info(0xFF00, "testTag", JSON.stringify(dismissDialogAction.reason));
+                  hilog.info(0xFF00, 'testTag', JSON.stringify(dismissDialogAction.reason));
                 }
               }).then((dialogId: number) => {
                 this.customDialogComponentId = dialogId
@@ -102,4 +103,6 @@ export struct InterceptReturn01 {
       .justifyContent(FlexAlign.End)
     }
   }
-}
\ No newline at end of file
+}
+
+// DocsCode 1
\ No newline at end of file
diff --git a/CustomDialogPractice/entry/src/main/ets/pages/InterceptReturn02.ets b/CustomDialogPractice/entry/src/main/ets/pages/InterceptReturn02.ets
index d12af8d4869fec9cdcbdb85be890f183fbe5a0b2..d8d49ee8bc41b4965f9c0ac90fa8a4567d585040 100644
--- a/CustomDialogPractice/entry/src/main/ets/pages/InterceptReturn02.ets
+++ b/CustomDialogPractice/entry/src/main/ets/pages/InterceptReturn02.ets
@@ -13,6 +13,7 @@
  * limitations under the License.
  */
 
+// DocsCode 1
 @Component
 export struct InterceptReturn02 {
   @Consume('NavPathStack') pageStack: NavPathStack;
@@ -102,4 +103,6 @@ export struct DialogPage1 {
     })
     .borderColor(Color.White)
   }
-}
\ No newline at end of file
+}
+
+// DocsCode 1
\ No newline at end of file
diff --git a/CustomDialogPractice/entry/src/main/ets/uitls/PromptActionClass.ets b/CustomDialogPractice/entry/src/main/ets/uitls/PromptActionClass.ets
index f83cea5640b11ebd3835b996542a43cc00099c0a..407fa0a407b6387a2a214953e60df16e2835412d 100644
--- a/CustomDialogPractice/entry/src/main/ets/uitls/PromptActionClass.ets
+++ b/CustomDialogPractice/entry/src/main/ets/uitls/PromptActionClass.ets
@@ -13,9 +13,11 @@
  * limitations under the License.
  */
 
+// DocsCode 1
 import { BusinessError } from '@kit.BasicServicesKit';
 import { ComponentContent, promptAction } from '@kit.ArkUI';
 import { UIContext } from '@ohos.arkui.UIContext';
+import { hilog } from '@kit.PerformanceAnalysisKit';
 
 export class PromptActionClass {
   static ctx: UIContext;
@@ -39,12 +41,12 @@ export class PromptActionClass {
       PromptActionClass.ctx.getPromptAction()
         .openCustomDialog(PromptActionClass.contentNode, PromptActionClass.options)
         .then(() => {
-          console.info('OpenCustomDialog complete.')
+          hilog.info(0x0000, 'testTag', 'OpenCustomDialog complete.');
         })
         .catch((error: BusinessError) => {
           let message = (error as BusinessError).message;
           let code = (error as BusinessError).code;
-          console.error(`OpenCustomDialog args error code is ${code}, message is ${message}`);
+          hilog.error(0x0000, 'testTag', `OpenCustomDialog args error code is ${code}, message is ${message}`);
         })
     }
   }
@@ -54,16 +56,18 @@ export class PromptActionClass {
       PromptActionClass.ctx.getPromptAction()
         .closeCustomDialog(PromptActionClass.contentNode)
         .then(() => {
-          console.info('CloseCustomDialog complete.')
+          hilog.info(0x0000, 'testTag', 'CloseCustomDialog complete.');
           if (PromptActionClass.contentNode !== null) {
-            PromptActionClass.contentNode.dispose();   // 释放contentNode
+            PromptActionClass.contentNode.dispose(); // release contentNode.
           }
         })
         .catch((error: BusinessError) => {
           let message = (error as BusinessError).message;
           let code = (error as BusinessError).code;
-          console.error(`CloseCustomDialog args error code is ${code}, message is ${message}`);
+          hilog.error(0x0000, 'testTag', `CloseCustomDialog args error code is ${code}, message is ${message}`);
         })
     }
   }
-}
\ No newline at end of file
+}
+
+// DocsCode 1
\ No newline at end of file
diff --git a/CustomDialogPractice/screenshots/device/Effect.gif b/CustomDialogPractice/screenshots/device/Effect.gif
index 951b10f11d1e73b80f9206ee9635f3661d1856a1..cd892903acaf6572752e4b9984dd90ed31b5d636 100644
Binary files a/CustomDialogPractice/screenshots/device/Effect.gif and b/CustomDialogPractice/screenshots/device/Effect.gif differ