Use the Navigation component for navigation and set mode of NavDestination to NavDestinationMode.DIALOG. In this way, the entire NavDestination page will be displayed with a default transparent effect. For details, see Dialog mode in Page Display Mode. The sample code is as follows:
@Component
export struct TransparentPage {
@Provide('NavPathStack') pageStack: NavPathStack = new NavPathStack();
@Builder
pageMapBuilder(name: string) {
if (name === 'DialogPage') {
DialogPage()
}
}
build() {
Navigation(this.pageStack) {
Button('Push DialogPage')
.margin(20)
.width('80%')
.onClick(() => {
this.pageStack.pushPathByName('DialogPage', '');
})
}
.mode(NavigationMode.Stack)
.title('Main')
.navDestination(this.pageMapBuilder)
}
}
@Component
export struct DialogPage {
@Consume('NavPathStack') pageStack: NavPathStack;
build() {
NavDestination() {
Stack({ alignContent: Alignment.Center }) {
Column() {
Text("Dialog NavDestination")
.fontSize(20)
.margin({ bottom: 100 })
Button("Close")
.onClick(() => {
this.pageStack?.pop() ?? console.warn("Navigation stack is empty");
})
.width('30%')
}
.justifyContent(FlexAlign.Center)
.borderRadius(10)
.height('30%')
.width('80%')
}
.height("100%")
.width('100%')
}
.hideTitleBar(true)
.mode(NavDestinationMode.DIALOG)
}
}