# PromptAction弹窗禁用点击蒙层隐藏弹窗功能

#### 问题现象

PromptAction自定义弹窗如何实现在点击弹窗外围的蒙层时，弹窗不关闭？

#### 效果预览

#### 背景知识

*   PromptAction弹窗：为官网提供的一种弹窗方式，由于上下文不明确，在API18以后部分接口废弃。废弃的接口建议通过this.getUIContext().getPromptAction()获取弹窗实例后调用。
*   onWillDismiss：PromptAction弹窗的关闭事件可以在通过onWillDismiss方法指定是否关闭弹窗。方法内指定对应的DismissDialogAction信息控制是否关闭弹窗，关闭调用dismiss()函数，不关闭则不调用即可。控制关闭事件参考DismissReason。

#### 解决方案

实现PromptAction弹窗禁用点击蒙层隐藏弹窗功能时，只需要在onWillDismiss内控制关闭信息：在dismissDialogAction.reason !== DismissReason.TOUCH\_OUTSIDE条件下调用dismiss()关闭函数即可，在该条件下除了点击蒙层不关闭弹窗外，其他关闭条件都不影响。

```
import { PromptAction } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  promptAction: PromptAction = this.getUIContext().getPromptAction();
  private customDialogComponentId: number = 0;

  @Builder
  customDialogComponent() {
    Column() {
      Text('弹窗').fontSize(30)
      Row({ space: 50 }) {
        Button('确认').onClick(() => {
          this.promptAction.closeCustomDialog(this.customDialogComponentId);
        })
        Button('取消').onClick(() => {
          this.promptAction.closeCustomDialog(this.customDialogComponentId);
        })
      }
    }.height(200).padding(5).justifyContent(FlexAlign.SpaceBetween)
  }

  build() {
    Row() {
      Column() {
        Button('click me')
          .onClick(() => {
            this.promptAction.openCustomDialog({
              builder: () => {
                this.customDialogComponent();
              },
              onWillDismiss: (dismissDialogAction: DismissDialogAction) => {
                if (dismissDialogAction.reason !== DismissReason.TOUCH_OUTSIDE) {
                  dismissDialogAction.dismiss();
                }
              }
            }).then((dialogId: number) => {
              this.customDialogComponentId = dialogId;
            });
          })
      }
      .width('100%')
      .height('100%')
    }
    .height('100%')
  }
}
```

#### 总结

本方案通过onWillDismiss内回调实现点击蒙层不关闭弹窗的功能。同时也可以采用isModal设置为false，取消弹窗蒙层，实现类似点击弹窗外不关闭的功能，但是该功能还会导致点击穿透。