diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_full_screen_modal_alpha.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_full_screen_modal_alpha.gif
index 54c74793ba762946b561e869b3352db7a116b3ce..f25865fb56ce8e95854bef0f6a1fd37eca0c5dcb 100644
Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_full_screen_modal_alpha.gif and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_full_screen_modal_alpha.gif differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_full_screen_modal_default.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_full_screen_modal_default.gif
index a2790b3cf613f7c525ba5b57d3c7b88ed41b1505..a0229af6fa82c19390c6f57ce3429c6aaca4cc15 100644
Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_full_screen_modal_default.gif and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_full_screen_modal_default.gif differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_full_screen_modal_none_1.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_full_screen_modal_none_1.gif
index 88bc23b3df7443202ac67719d08f33e8b1006a42..904db2132184a8529b97db01c2351c02b55d783b 100644
Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_full_screen_modal_none_1.gif and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_full_screen_modal_none_1.gif differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_full_screen_modal_none_2.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_full_screen_modal_none_2.gif
index 0a38281620329cb6a1c2f39ad9babe628950a41a..de0356ab987af9712816fce835293da7c679decd 100644
Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_full_screen_modal_none_2.gif and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_full_screen_modal_none_2.gif differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_sheet.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_sheet.gif
index 192e22e3d28c4d56350c070fae5375d358a9abb7..1e89b5ee6696fb3b2d3e09a1049e1194f48a4275 100644
Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_sheet.gif and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_sheet.gif differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-modal-transition.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-modal-transition.md
index 6f3c0a00807ec6634b19b522dc0727067a7a4483..c661f07803991f13a0eb8ae9ca925764e86f9b63 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-modal-transition.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-modal-transition.md
@@ -9,9 +9,16 @@
 
 ## 属性
 
-| 名称               | 参数                                       | 参数描述                                     |
-| ---------------- | ---------------------------------------- | ---------------------------------------- |
-| bindContentCover | isShow: boolean,<br>builder: [CustomBuilder](ts-types.md#custombuilder8),<br>type?: [ModalTransition](ts-types.md#modaltransition10) | 给组件绑定全屏模态页面，点击后显示模态页面。模态页面内容自定义，显示方式可设置无动画过渡，上下切换过渡以及透明渐变过渡方式。<br/> isShow: 必填，是否显示全屏模态页面。<br/>builder: 必填，配置全屏模态页面内容。<br/> type: 非必填，配置全屏模态页面的转场方式。 |
+| 名称  | 参数 | 参数描述 |
+| ----- | ----- | ----- |
+| bindContentCover | isShow: boolean,<br>builder: [CustomBuilder](ts-types.md#custombuilder8),<br>options?: [ContentCoverOptions](#contentcoveroptions) | 给组件绑定全屏模态页面，点击后显示模态页面。模态页面内容自定义，显示方式可设置无动画过渡，上下切换过渡以及透明渐变过渡方式。<br> isShow: 必填，是否显示全屏模态页面。<br>builder: 必填，配置全屏模态页面内容。<br> options: 非必填，配置全屏模态页面的可选属性。 |
+## ContentCoverOptions
+| 名称 | 类型 | 必填 | 描述 |
+|-----|-----|-----|-----|
+| modalTransition | [ModalTransition](ts-types.md#modaltransition10) | 否 | 全屏模态页面的转场方式。 |
+| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 全屏模态页面的背板颜色。 |
+| onAppear | () => void | 否 | 全屏模态页面显示回调函数。 |
+| onDisappear | () => void | 否 | 全屏模态页面回退回调函数。 |
 
 ## 示例
 
@@ -38,7 +45,6 @@ struct ModalTransitionExample {
     }
     .width('100%')
     .height('100%')
-    .backgroundColor(Color.Orange)
   }
 
   @Builder myBuilder() {
@@ -48,7 +54,7 @@ struct ModalTransitionExample {
         .fontSize(20)
         .onClick(()=>{
           this.isShow2 = true;
-        }).bindContentCover($$this.isShow2, this.myBuilder2(), ModalTransition.NONE)
+        }).bindContentCover($$this.isShow2, this.myBuilder2(), {modalTransition: ModalTransition.NONE, backgroundColor: Color.Orange, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})
 
       Button("close modal 1")
         .margin(10)
@@ -59,7 +65,6 @@ struct ModalTransitionExample {
     }
     .width('100%')
     .height('100%')
-    .backgroundColor(Color.Pink)
     .justifyContent(FlexAlign.Center)
   }
 
@@ -71,7 +76,7 @@ struct ModalTransitionExample {
         })
         .fontSize(20)
         .margin(10)
-        .bindContentCover($$this.isShow, this.myBuilder(), ModalTransition.NONE)
+        .bindContentCover($$this.isShow, this.myBuilder(), {modalTransition: ModalTransition.NONE, backgroundColor: Color.Pink, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})
     }
     .justifyContent(FlexAlign.Center)
     .backgroundColor("#ff49c8ab")
@@ -117,7 +122,6 @@ struct ModalTransitionExample {
     }
     .width('100%')
     .height('100%')
-    .backgroundColor(Color.Orange)
   }
 
 
@@ -128,7 +132,7 @@ struct ModalTransitionExample {
         .fontSize(20)
         .onClick(()=>{
           this.isShow2 = true;
-        }).bindContentCover($$this.isShow2, this.myBuilder2(), ModalTransition.NONE)
+        }).bindContentCover($$this.isShow2, this.myBuilder2(), {modalTransition: ModalTransition.NONE, backgroundColor: Color.Orange, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})
 
       Button("close modal 1")
         .margin(10)
@@ -139,7 +143,6 @@ struct ModalTransitionExample {
     }
     .width('100%')
     .height('100%')
-    .backgroundColor(Color.Pink)
     .justifyContent(FlexAlign.Center)
     .scale({x: this.isScale2, y: this.isScale2})
     .animation({curve:curves.springMotion()})
@@ -153,7 +156,7 @@ struct ModalTransitionExample {
         })
         .fontSize(20)
         .margin(10)
-        .bindContentCover($$this.isShow, this.myBuilder(), ModalTransition.NONE)
+        .bindContentCover($$this.isShow, this.myBuilder(), {modalTransition: ModalTransition.NONE, backgroundColor: Color.Pink, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})
     }
     .justifyContent(FlexAlign.Center)
     .backgroundColor("#ff49c8ab")
@@ -190,7 +193,6 @@ struct ModalTransitionExample {
     }
     .width('100%')
     .height('100%')
-    .backgroundColor(Color.Gray)
   }
 
   @Builder myBuilder() {
@@ -200,7 +202,7 @@ struct ModalTransitionExample {
         .fontSize(20)
         .onClick(()=>{
           this.isShow2 = true;
-        }).bindContentCover(this.isShow2, this.myBuilder2(), ModalTransition.DEFAULT)
+        }).bindContentCover(this.isShow2, this.myBuilder2(), {modalTransition: ModalTransition.DEFAULT, backgroundColor: Color.Gray, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})
 
       Button("close modal 1")
         .margin(10)
@@ -211,7 +213,6 @@ struct ModalTransitionExample {
     }
     .width('100%')
     .height('100%')
-    .backgroundColor(Color.Pink)
     .justifyContent(FlexAlign.Center)
   }
 
@@ -223,7 +224,7 @@ struct ModalTransitionExample {
         })
         .fontSize(20)
         .margin(10)
-        .bindContentCover($$this.isShow, this.myBuilder(), ModalTransition.DEFAULT)
+        .bindContentCover($$this.isShow, this.myBuilder(), {modalTransition: ModalTransition.DEFAULT, backgroundColor: Color.Pink, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})
     }
     .justifyContent(FlexAlign.Center)
     .backgroundColor(Color.White)
@@ -258,7 +259,6 @@ struct ModalTransitionExample {
     }
     .width('100%')
     .height('100%')
-    .backgroundColor(Color.Gray)
     .justifyContent(FlexAlign.Center)
   }
 
@@ -270,7 +270,7 @@ struct ModalTransitionExample {
         .fontSize(20)
         .onClick(()=>{
           this.isShow2 = true;
-        }).bindContentCover(this.isShow2, this.myBuilder2(), ModalTransition.ALPHA)
+        }).bindContentCover(this.isShow2, this.myBuilder2(), {modalTransition: ModalTransition.ALPHA, backgroundColor: Color.Gray, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})
 
       Button("close modal 1")
         .margin(10)
@@ -281,7 +281,6 @@ struct ModalTransitionExample {
     }
     .width('100%')
     .height('100%')
-    .backgroundColor(Color.Pink)
     .justifyContent(FlexAlign.Center)
   }
 
@@ -293,7 +292,7 @@ struct ModalTransitionExample {
         })
         .fontSize(20)
         .margin(10)
-        .bindContentCover($$this.isShow, this.myBuilder(), ModalTransition.ALPHA)
+        .bindContentCover($$this.isShow, this.myBuilder(), {modalTransition: ModalTransition.ALPHA, backgroundColor: Color.Pink, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})
     }
     .justifyContent(FlexAlign.Center)
     .backgroundColor(Color.White)
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-sheet-transition.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-sheet-transition.md
index 0fde5239fbd643db09eb91960b2fe14e758d99a9..0da074ad3ee639487f4ebf5cc2e9a4b77b3050ac 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-sheet-transition.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-sheet-transition.md
@@ -9,18 +9,21 @@
 
 ## 属性
 
-| 名称 | 参数   | 参数描述 |
-| -------- | -------- | -------- |
-| bindSheet | isShow: boolean,<br>builder: [CustomBuilder](ts-types.md#custombuilder8),<br>sheetStyle?: [SheetStyle](#sheetstyle10) | 给组件绑定半模态页面，点击后显示模态页面。isShow: 必填，是否显示半模态页面。<br/>builder: 必填，配置半模态页面内容。<br/> sheetStyle: 非必填，配置半模态页面高度和是否显示控制条，默认高度是Large，默认显示控制条。 |
+| 名称 | 参数 | 参数描述 |
+| ----- | ----- | ----- |
+| bindSheet | isShow: boolean,<br>builder: [CustomBuilder](ts-types.md#custombuilder8),<br>options?: [SheetOptions](#sheetoptions) | 给组件绑定半模态页面，点击后显示模态页面。<br>isShow: 必填，是否显示半模态页面。<br>builder: 必填，配置半模态页面内容。<br> options: 非必填，配置半模态页面的可选属性。 |
 
-## SheetStyle<sup>10+</sup>
+## SheetOptions
 
-| 名称               | 类型                                   | 必填 | 描述                   |
-| ------------------ | -------------------------------------- | ---- | ---------------------- |
-| height             | [SheetSize](#sheetsize10)&nbsp;\|&nbsp;[Length](ts-types.md#length) | 否 | 半模态高度。          |
-| dragBar            | boolean                                | 否   | 是否显示控制条。          |
+| 名称 | 类型 | 必填 | 描述 |
+| ----- | ----- | ----- | ------ |
+| height | [SheetSize](#sheetsize)&nbsp;\|&nbsp;[Length](ts-types.md#length) | 否 | 半模态高度，默认是LARGE。 |
+| dragBar | boolean | 否 | 是否显示控制条，默认显示。 |
+| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 半模态页面的背板颜色。 |
+| onAppear | () => void | 否 | 半模态页面显示回调函数。 |
+| onDisappear | () => void | 否 | 半模态页面回退回调函数。 |
 
-## SheetSize<sup>10+</sup>
+## SheetSize
 
 | 名称 | 参数描述 |
 | -------- | -------- |
@@ -81,7 +84,7 @@ struct SheetTransitionExample {
         })
         .fontSize(20)
         .margin(10)
-        .bindSheet($$this.isShow, this.myBuilder(), {height: this.sheetHeight, dragBar: this.showDragBar})
+        .bindSheet($$this.isShow, this.myBuilder(), {height: this.sheetHeight, dragBar: this.showDragBar, backgroundColor: Color.Green, onAppear: () => {console.log("BindSheet onAppear.")}, onDisappear: () => {console.log("BindSheet onDisappear.")}})
     }
     .justifyContent(FlexAlign.Center)
     .width('100%')