nz-modal如何去掉底部’确定’和’取消’按钮

1.自定义底部按钮

在ant-design中有个组件nz-modal，官方给的参考代码如下:

<nz-modal [(nzVisible)]="isVisible" nzTitle="The first Modal" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
  <p>Content one</p>
  <p>Content two</p>
  <p>Content three</p>
</nz-modal>

基础效果如下：

有时候我们不想要底部的‘取消’和‘确定’按钮，我们可以自定义底部

我们在底部加入 [nzFooter]=”null” 就可以取消掉显示的内容了。

<nz-modal [(nzVisible)]="isVisible2" nzTitle="The first Modal" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"   [nzFooter]="null">
  <p>Content one</p>
  <p>Content two</p>
  <p>Content three</p>
</nz-modal>

如果需要自定义底部内容，我们可以参考下面的代码进行修改。

<nz-modal [(nzVisible)]="isVisible2" nzTitle="The first Modal" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"   [nzFooter]="modalFooter">
  <p>Content one</p>
  <p>Content two</p>
  <p>Content three</p>
</nz-modal>



 <ng-template #modalFooter>
        <span>Modal Footer: </span>
        <button nz-button nzType="default" (click)="handleCancel()">Custom Callback</button>
        <button nz-button nzType="primary" (click)="handleOk()" [nzLoading]="isConfirmLoading">Custom Submit</button>
      </ng-template>

2.取消handleOk和handleCancel方法

我们关闭模态框的方式可以点击遮罩层或者通过方法修改isVisible2的值。但是我们可以直接在html层就关闭modal。直接将nzOnCancel和nzOnOk修改即可。

<nz-modal [(nzVisible)]="isVisible2" nzTitle="The first Modal" (nzOnCancel)="isVisible2=false" (nzOnOk)="isVisible2=false"   >
  <p>Content one</p>
  <p>Content two</p>
  <p>Content three</p>
</nz-modal>