Ionic 2：点击背景时模式不关闭

Question

我正在尝试运行一个简单的示例应用程序，其模式仅覆盖屏幕的下半部分。当我点击我认为是预期行为的背景时，我希望模式关闭。但是，单击背景时没有任何反应。我知道默认情况下应该为 true 的 enableBackdropDismiss。我正在使用 Ionic-angular 3.2.1.

首页：

import { Component } from '@angular/core';
import { NavController, ModalController } from 'ionic-angular';
import { Modal } from '../modal/modal';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, public modalCtrl: ModalController) {

  }

  openModal(){
    let modal = this.modalCtrl.create(Modal);
    modal.present();
  }

}

<ion-header>
  <ion-navbar>
    <ion-title>
      Modal Test
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button (click)="openModal()">Open Modal</button>
</ion-content>

模态：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-modal',
  templateUrl: 'modal.html',
})
export class Modal {

  constructor(public navCtrl: NavController, public navParams: NavParams, public viewCtrl: ViewController) {
  }

  closeModal(): void {
    this.viewCtrl.dismiss();
  }

}

<ion-footer>
    <ion-navbar>
        <h4>Modal</h4>
        <p>I'm a Modal</p>
        <button ion-button (click)="closeModal()">Close Modal</button>
    </ion-navbar>
</ion-footer>

这是显示模式时的样子。弹窗只在点击按钮时关闭，点击背景时不关闭：

Answer 1

就像我们在评论中发现的那样，解决这个问题的一种方法是在模态中添加一个空内容，将内容的点击事件绑定到 closeModal 方法，然后设置内容背景透明

<ion-content tappable (click)="closeModal()">
</ion-content>
<ion-footer>
    <ion-navbar>
        <h4>Modal</h4>
        <p>I'm a Modal</p>
        <button ion-button (click)="closeModal()">Close Modal</button>
    </ion-navbar>
</ion-footer>

并且在组件样式中：

ion-content div.scroll-content {
    background-color: transparent;
}

Answer 2

只有css个问题。

请添加到app.scss

@media not all and (min-height: 600px) and (min-width: 768px) {
  ion-modal ion-backdrop {
    visibility: visible;
  }
}

此代码段将显示您的背景（对于小屏幕是隐藏的）

和

.modal-wrapper {
  width: 70%;
  height: 70%;
  position: absolute;
  margin-top: 25%;
  left: 15%;
}

将模态框设置为非全宽和全高（默认）并且它应该绝对定位以避免在 iOS 设备上出现问题，这将在模态之前呈现背景。

顺便说一句，您现在不应该将您的内容放在 - 这不是很好的做法。但在这种情况下，您可以根据需要设置模态位置，并使用所有需要的元素和规则，而没有页眉或页脚限制。

Answer 3

如果有人正在寻找 Ionic 5 的解决方案。将此示例放入您的 global.scss

.my-custom-modal-css .modal-wrapper {
    height: 50%;
    width: 80%;
    position: absolute; 
 }

.modal-shadow{
    display: none;
}

别忘了加上"my-custom-modal" css class.

const modal = await this.modalController.create({
  component: LocationqrviewPage,
  cssClass: 'my-custom-modal-css',
  backdropDismiss: true
});
return await modal.present();

Ionic 2：点击背景时模式不关闭

Ionic 2: Modal doesn't close when clicking on backdrop

typescript

ionic2

ionic3

angular