首先

在手机上，默认情况下，模态框将占满整个屏幕显示。
官方文档：ion-modal
下面将介绍如何使用SCSS自定义此模态框。
为了便于复制粘贴试用，我已经提供了经过编辑的HTML、TypeScript和SCSS代码。

创建一个测试模态的项目

我将创建一个用于测试的项目。

$ ionic start modalTest blank --type=angular

创建一个使用模态窗口显示的页面。

创建一个使用模态窗口进行显示的页面。

$ ionic g page modal

尝试以常规方式显示模态框

首先，我们尝试以常规方式显示模态窗口。
主页面只有一个显示模态窗口的按钮，当按钮被点击时，会显示模态窗口页面。

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="ion-padding">
      <ion-button expand="block" fill="outline" (click)="presentModal()">ion-modal表示</ion-button>
  </div>
</ion-content>

import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { ModalPage} from '../modal/modal.page';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(
    private modalCtrl: ModalController,
  ) {}
  async presentModal() {
    const modal = await this.modalCtrl.create({
      component: ModalPage,
    });
    return await modal.present();
  }
}

<ion-header>
  <ion-toolbar>
    <ion-title>モーダル
    </ion-title>
    <ion-buttons slot="end">
        <ion-button (click)="close()"><ion-icon name="close"></ion-icon></ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
</ion-content>

import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';

@Component({
  selector: 'app-modal',
  templateUrl: './modal.page.html',
  styleUrls: ['./modal.page.scss'],
})
export class ModalPage implements OnInit {

  constructor(
    private modalCtrl: ModalController,
  ) { }

  ngOnInit() {
  }

  close() {
    this.modalCtrl.dismiss();
  }

}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { ModalPageModule } from '../app/modal/modal.module'; //追加

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, 
    IonicModule.forRoot(), 
    AppRoutingModule,
    ModalPageModule, //追加
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

用SCSS进行漂亮的自定义。

以下是要更改的代码。

import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { ModalPage} from '../modal/modal.page';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(
    private modalCtrl: ModalController,
  ) {}
  async presentModal() {
    const modal = await this.modalCtrl.create({
      component: ModalPage,
      cssClass: 'custom-modal-css' //追加
    });
    return await modal.present();
  }
}

/*
 * App Global CSS
 * ----------------------------------------------------------------------------
 * Put style rules here that you want to apply globally. These styles are for
 * the entire app and not just one component. Additionally, this file can be
 * used as an entry point to import other CSS/Sass files to be included in the
 * output CSS.
 * For more information on global stylesheets, visit the documentation:
 * https://ionicframework.com/docs/layout/global-stylesheets
 */

/* Core CSS required for Ionic components to work properly */
@import "~@ionic/angular/css/core.css";

/* Basic CSS for apps built with Ionic */
@import "~@ionic/angular/css/normalize.css";
@import "~@ionic/angular/css/structure.css";
@import "~@ionic/angular/css/typography.css";
@import '~@ionic/angular/css/display.css';

/* Optional CSS utils that can be commented out */
@import "~@ionic/angular/css/padding.css";
@import "~@ionic/angular/css/float-elements.css";
@import "~@ionic/angular/css/text-alignment.css";
@import "~@ionic/angular/css/text-transformation.css";
@import "~@ionic/angular/css/flex-utils.css";
.custom-modal-css .modal-wrapper {
    width: 90%;
    height: 90%;
    top: 5%;
    position: absolute; 
    display: block;  
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
 }

总结

您可以通过编辑SCSS文件来自定义各种模态框界面。
以下是在模态框界面中传递数据的方法。

仅提供一种选项：
在中国，将以下内容进行中文本地化重新表达，只需提供一个选项：

参考资料