# 如何修改半模态弹窗关闭按钮背景色

#### 问题现象

如何实现半模态弹窗关闭按钮背景色的修改？如下图：

#### 背景知识

*   半模态转场是通过bindSheet为组件绑定半模态页面。其根据isShow属性控制半模态页面是否显示，并通过options属性配置相关属性。
*   SymbolGlyph组件适用于独立图标的展示。开发者可以为图标设置字号大小和字体粗细，此外，SymbolGlyph组件还支持自定义颜色渲染策略，允许开发者根据应用的主题或用户偏好调整图标颜色。同时，组件还支持动效策略，使得图标在用户交互时能够展现出生动的动画效果。
*   图标名称请查阅HarmonyOS Symbol图标库。

#### 解决方案

bindSheet关闭按钮样式属于固有属性，可以通过配置bindSheet的可选属性options中的showClose参数为false隐藏关闭按钮，然后封装一个自定义关闭按钮显示在弹窗相应位置，以实现自定义关闭按钮样式。示例代码如下：

```
@Entry
@Component
struct BindSheetCloseBackgroundPage {
  @State isShow: boolean = false;

  @Builder
  bindSheetExample() {
    Row() {
      Column() {
        Text('标题');
      }.alignItems(HorizontalAlign.Start);

      Column() {
        SymbolGlyph($r('sys.symbol.xmark'))
          .fontSize(18)
          .renderingStrategy(SymbolRenderingStrategy.SINGLE)
          .fontColor([Color.White, Color.Green, Color.White]);
      }
      .borderRadius('100%')
      .padding(5)
      .backgroundColor('#ff165cf3')
      .onClick(() => {
        this.isShow = false;
      })
      .alignItems(HorizontalAlign.Center)
      .justifyContent(FlexAlign.Center)
      .width(34)
      .height(34);
    }.width('100%')
    .padding({ top: 20, left: 20, right: 20 })
    .justifyContent(FlexAlign.SpaceBetween);
  }

  build() {
    Column() {
      Button('open')
        .onClick(() => {
          this.isShow = true;
        })
        .bindSheet($$this.isShow, this.bindSheetExample(), {
          height: 500,
          width: '100%',
          showClose: false
        })
        .margin({ top: 180 });
    }
    .alignItems(HorizontalAlign.Center)
    .width('100%');
  }
}
```