antd-modal

最新推荐文章于 2025-04-25 14:00:40 发布

开水没有冬天

最新推荐文章于 2025-04-25 14:00:40 发布

阅读量3.9k

点赞数 1

分类专栏： antd

本文链接：https://blog.youkuaiyun.com/weixin_42995876/article/details/82802534

版权

antd 专栏收录该内容

23 篇文章

订阅专栏

1.nzMaskClosable：false;点击遮罩层是不允许关闭的；默认为true；

[nzMaskClosable]='false'

2.修改icon：
其中icon的全写为：<i class="anticon anticon-down"></i>

this.confirmServ.info({
      title: '这是一条通知信息',
      content: contentTpl,
      maskClosable:false, // 点击遮罩层，关闭： false/true
      iconType:'down', // 直接用后面的就行了。
    });

3.自定义头（8.x）

<nz-modal [(nzVisible)]="newFlag"
          [nzTitle]="addTitle"
          (nzOnCancel)="handleCancel()"
          (nzOnOk)="handleOk()">

  // header
  <ng-template #addTitle>
    <div class="invitation-add-title">新增 
    	<span class="add-title-remark">注：请按照文本框的要求填写</span>
    </div>
  </ng-template>

  // content
  <div>
  	content
  </div>

  // footer
  <div *nzModalFooter>
    <button nz-button nzType="default" (click)="handleCancel()">取消</button>
    <button nz-button nzType="primary" (click)="handleOk()">保存</button>
  </div>
</nz-modal>

注：[nzTitle]=“addTitle”，nzTitle有中括号。

设置mask和modal的样式

  <nz-modal [(nzVisible)]="selectTenantModalFlag"
            nzTitle="由于您的账户关联了多个机构，请选择登录机构"
            [nzWrapClassName]="'ks_mask'"
            [nzClassName]="'ks_modal'"
            [nzMaskClosable]="false"
            [nzFooter]="footerTmp"
            (nzOnCancel)="handleCancel()"
            (nzOnOk)="handleOk()">
    <div class="login-select-tenant-modal">
		具体的内容
      </div>

  
  </nz-modal>


/*全局样式*/
// body内部的div
.login-select-tenant-modal{

  max-height: 312px;
  overflow: auto;
}
.ks_mask{
  background: url("assets/images/new-login/big-bg.png");// mask给了背景图片
}
// 包括：头，body，footer
.ks_modal{
  top:20%; // 单独设置位置
}

nzStyle	:可用于设置浮层的样式，调整浮层位置等
nzMaskStyle:遮罩样式
nzBodyStyle:Modal body 样式

modal页面的按钮跳转到某个页面（有滚动条的时候）

进去页面后，最外层的页面没有滚动条了，所以页面滑动不到最顶端；
不要直接从modal页面跳转。