1# Binding a Full-Modal Page (bindContentCover)
2
3A full-modal page, implemented using [bindContentCover](../reference/apis-arkui/arkui-ts/ts-universal-attributes-modal-transition.md#bindcontentcover), is a full-screen modal interaction page that completely covers the underlying parent view. It is ideal for scenarios such as viewing large images or full-screen documents.
4
5## Constraints
6
7A full-modal page functions as a popup component and is, by default, at the topmost layer in the application.
8
9When [Navigation](../reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md) is used, any new page pushed will not be able to exceed the full-modal in terms of layering; it will remain beneath the modal page. In such cases, consider integrating the content of the modal page into the transition page. For example, you can use **NavDestination** to replace the modal page being launched, ensuring that the new page is positioned below the full-modal.
10
11## Lifecycle
12
13The full-modal page provides lifecycle callbacks to notify the application of the lifecycle status of the popup. These callbacks are triggered in the following order: onWillAppear -> onAppear -> onWillDisappear -> onDisappear.
14
15| Name           |Type| Description                      |
16| ----------------- | ------ | ---------------------------- |
17| onWillAppear    | () => void | Callback for when the full-modal page is about to be displayed (before the animation starts).|
18| onAppear    | () => void  | Callback for when the full-modal page is displayed (after the animation ends). |
19| onWillDisappear | () => void | Callback for when the full-modal page is about to disappear (before the animation starts).|
20| onDisappear |() => void  | Callback for when the full-modal page disappears (after the animation ends).    |
21
22## Using bindContentCover to Build Full-Screen Modal Content over Semi-Modal
23
24There is a popup-style layer interaction between full-modal and semi-modal pages. A modal page launched later can cover the previous modal page. If you want to implement a full-screen transition to cover the semi-modal and ensure that the semi-modal page remains visible after the full-screen page is swiped out, use **bindSheet** in combination with **bindContentCover**.
25
26For details about how to use **bindContentCover** to create a full-screen modal transition effect, see [Modal Transition](arkts-modal-transition.md#creating-modal-transition-with-bindcontentcover)
27
28```ts
29import { curves } from '@kit.ArkUI';
30
31interface PersonList {
32  name: string,
33  cardnum: string
34}
35
36@Entry
37@Component
38struct BindContentCoverDemo {
39  private personList: Array<PersonList> = [
40    { name: 'Wang **', cardnum: '1234***********789' },
41    { name: 'Song *', cardnum: '2345***********789' },
42    { name: 'Xu **', cardnum: '3456***********789' },
43    { name: 'Tang *', cardnum: '4567***********789' }
44  ];
45  // Define the state variable to control the semi-modal visibility.
46  @State isSheetShow: boolean = false;
47  // Define the state variable to control the full-modal visibility.
48  @State isPresent: boolean = false;
49
50  @Builder
51  MyContentCoverBuilder() {
52    Column() {
53      Row() {
54        Text('Select passengers')
55          .fontSize(20)
56          .fontColor(Color.White)
57          .width('100%')
58          .textAlign(TextAlign.Center)
59          .padding({ top: 30, bottom: 15 })
60      }
61      .backgroundColor(0x007dfe)
62
63      Row() {
64        Text('+ Add')
65          .fontSize(16)
66          .fontColor(0x333333)
67          .margin({ top: 10 })
68          .padding({ top: 20, bottom: 20 })
69          .width('92%')
70          .borderRadius(10)
71          .textAlign(TextAlign.Center)
72          .backgroundColor(Color.White)
73      }
74
75      Column() {
76        ForEach(this.personList, (item: PersonList, index: number) => {
77          Row() {
78            Column() {
79              if (index % 2 == 0) {
80                Column()
81                  .width(20)
82                  .height(20)
83                  .border({ width: 1, color: 0x007dfe })
84                  .backgroundColor(0x007dfe)
85              } else {
86                Column()
87                  .width(20)
88                  .height(20)
89                  .border({ width: 1, color: 0x007dfe })
90              }
91            }
92            .width('20%')
93
94            Column() {
95              Text(item.name)
96                .fontColor(0x333333)
97                .fontSize(18)
98              Text(item.cardnum)
99                .fontColor(0x666666)
100                .fontSize(14)
101            }
102            .width('60%')
103            .alignItems(HorizontalAlign.Start)
104
105            Column() {
106              Text('Edit')
107                .fontColor(0x007dfe)
108                .fontSize(16)
109            }
110            .width('20%')
111          }
112          .padding({ top: 10, bottom: 10 })
113          .border({ width: { bottom: 1 }, color: 0xf1f1f1 })
114          .width('92%')
115          .backgroundColor(Color.White)
116        })
117      }
118      .padding({ top: 20, bottom: 20 })
119
120      Text('OK')
121        .width('90%')
122        .height(40)
123        .textAlign(TextAlign.Center)
124        .borderRadius(10)
125        .fontColor(Color.White)
126        .backgroundColor(0x007dfe)
127        .onClick(() => {
128          this.isPresent = !this.isPresent;
129        })
130    }
131    .size({ width: '100%', height: '100%' })
132    .backgroundColor(0xf5f5f5)
133  }
134
135  @Builder
136  TripInfo() {
137    Row() {
138      Column() {
139        Text('00:25')
140        Text('From')
141      }
142      .width('25%')
143
144      Column() {
145        Text('G1234')
146        Text('8 h 1 min')
147      }
148      .width('25%')
149
150      Column() {
151        Text('08:26')
152        Text('To')
153      }
154      .width('25%')
155    }
156  }
157
158  // Step 2: Define the semi-modal view.
159  // Use @Builder to build a modal view.
160  @Builder
161  MySheetBuilder() {
162    Column() {
163      Column() {
164        this.TripInfo()
165      }
166      .width('92%')
167      .margin(15)
168      .backgroundColor(Color.White)
169      .shadow({ radius: 30, color: '#aaaaaa' })
170      .borderRadius(10)
171
172      Column() {
173        Text('+ Select passengers')
174          .fontSize(18)
175          .fontColor(Color.Orange)
176          .fontWeight(FontWeight.Bold)
177          .padding({ top: 10, bottom: 10 })
178          .width('60%')
179          .textAlign(TextAlign.Center)
180          .borderRadius(15)
181          .onClick(() => {
182            // Step 3: Launch the full-modal view using the full-modal API. The newly launched modal panel is displayed on the top by default.
183            this.isPresent = !this.isPresent;
184          })
185            // Bind the modal view MyContentCoverBuilder using the full-modal API. The transition property supports custom transition effects. Here a horizontal entry along the x-axis is defined.
186          .bindContentCover($$this.isPresent, this.MyContentCoverBuilder(), {
187            transition: TransitionEffect.translate({ x: 500 }).animation({ curve: curves.springMotion(0.6, 0.8) })
188          })
189      }
190      .padding({ top: 60 })
191    }
192  }
193
194  build() {
195    Column() {
196      Row() {
197        this.TripInfo()
198        Text('Tickets available')
199          .fontColor(Color.Blue)
200          .width('25%')
201      }
202      .width('100%')
203      .margin({top: 200, bottom: 30})
204      .borderRadius(10)
205      .backgroundColor(Color.White)
206      .onClick(()=>{
207        this.isSheetShow = !this.isSheetShow
208      })
209      // Step 1: Define the semi-modal transition effect.
210      .bindSheet($$this.isSheetShow, this.MySheetBuilder(), {
211        height: SheetSize.MEDIUM,
212        title: {title: "Confirm Order"},
213      })
214    }
215    .width('100%')
216    .height('100%')
217    .backgroundColor('#30aaaaaa')
218  }
219}
220```
221