实现方式采取的是设置子页面的页面显示类型NavDestination设置mode为NavDestinationMode.DIALOG弹窗类型，此时整个NavDestination默认透明显示。弹窗类型的NavDestination显示和消失时不会影响下层标准类型的NavDestination的显示和生命周期，两者可以同时显示。

// Dialog NavDestination
@Entry
@Component
struct Index {
  @Provide('NavPathStack') pageStack: NavPathStack = new NavPathStack();

  @Builder
  PagesMap(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.PagesMap)
  }
}

@Component
export struct DialogPage {
  @Consume('NavPathStack') pageStack: NavPathStack;

  build() {
    NavDestination() {
      Stack({alignContent: Alignment.Bottom}) {
        Column() {
          Text("Dialog NavDestination")
            .fontSize(20)
          Button("Close").onClick(() => {
            this.pageStack.pop();
          }).width('100%')
        }.borderRadius({topRight: 30,topLeft: 30})
        .height('80%')
        .backgroundColor(Color.White)
      }
      .width('100%').height("100%")
    }
    .backgroundColor('rgba(0,0,0,0.5)')
    .height('100%')
    .hideTitleBar(true)
    .mode(NavDestinationMode.DIALOG)
  }
}

在我看来实现的核心部分是：

1.设置Stack({alignContent: Alignment.Bottom})，使得弹框可以靠近屏幕下方；

2.那几个宽度和高度的设置。如果后续需要更改的弹窗的高度，只需要更改：

其他的为100%的高度和宽度尽量别改，容易造成页面不符合。

最终的效果是：

后续在画布上可以增加关闭的图标，这些都是后话，容器已经有了，其他的都容易了。