Ionic控制器模态框高度自定义：如何设置固定高度

要将控制器创建的模态框设置为中间固定高度的样式，你可以通过修改模态框创建选项并添加自定义CSS实现：

1. 更新模态框创建代码 #

在openNwInsights方法中，为模态框添加presentationStyle和自定义样式类：

async openNwInsights(){
    const modal = await this.modalCtl.create({
      component: ExplainNetworthComponent,
      presentationStyle: 'popover', // 取消默认全屏展示
      cssClass: 'custom-centered-modal', // 绑定自定义样式类
      backdropDismiss: false // 可选：设置点击背景不关闭模态框
    })

    modal.present();
    const { data, role } = await modal.onWillDismiss();
}

2. 添加自定义CSS样式 #

在全局样式文件（如global.scss）中添加以下样式，可按需调整尺寸参数：

.custom-centered-modal .modal-wrapper {
  max-height: 60vh; /* 模态框最大高度，占视口60% */
  width: 90%; /* 模态框宽度 */
  max-width: 550px; /* 模态框最大宽度限制 */
  margin: auto; /* 居中显示 */
  border-radius: 12px; /* 可选：添加圆角优化外观 */
}

关键说明 #

• presentationStyle: 'popover'会让模态框脱离全屏布局，允许自定义尺寸调整。
• 通过custom-centered-modal类可以精准控制模态框的外观，你可以根据需求修改max-height、width等属性值。

内容的提问来源于stack exchange，提问作者Moblize IT