离子模态半屏

离子模态半屏是通过ionic框架提供的模态框组件实现的一种交互方式。通过这种交互方式，可以在当前页面上弹出一个半屏幕的模态框，将用户关注的内容展示在模态框中，同时模态框周围的页面半透明化，以增强用户对模态框中内容的关注度。

实现

在ionic中，使用模态框应该首先在需要弹出模态框的组件（页面）中引入模态框组件：

import { ModalController } from '@ionic/angular';

然后在组件对应的typescript文件中定义一个方法，该方法将打开模态框：

async openModal() {
  const modal = await this.modalController.create({
    component: MyModalComponent,  // 模态框组件
    cssClass: 'my-custom-modal-css',  // 模态框样式
  });
  await modal.present();
}

在上述代码中，需要将MyModalComponent替换成真正的模态框组件名，同时可以根据需求自定义模态框样式。

在模态框组件中，需要实现关闭模态框的逻辑，在typescript文件中定义如下方法：

async dismissModal() {
  await this.modalController.dismiss();
}

在模态框组件的HTML中，则需要设置页面布局，实现对穿透点击的阻止等：

<ion-content>
  <!-- 构建模态框布局 -->
</ion-content>
<ion-backdrop (click)="dismissModal()"></ion-backdrop>

在上述代码中，ion-content用于设置模态框中的内容布局，ion-backdrop则用于设置背景透明度，点击即可关闭模态框。

最后，在需要使用模态框的组件（页面）中添加一个按钮或其他触发事件即可打开模态框。

总结

通过使用ionic的模态框组件，可以简单方便地实现离子模态半屏，让用户更专注于页面中重要内容，提高用户使用体验。