Ionic 2：单击背景时模态不会关闭答案

【问题标题】：Ionic 2: Modal doesn't close when clicking on backdropIonic 2：单击背景时模态不会关闭
【发布时间】：2017-10-19 13:53:14
【问题描述】：

我正在尝试运行一个简单的示例应用程序，其模式仅覆盖屏幕的下部。当我单击我认为是预期行为的背景时，我希望模式关闭。但是，单击背景时没有任何反应。我知道默认情况下应该为 true 的 enableBackdropDismiss。我正在使用离子角度 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>

这是显示模态时的样子。模态框仅在单击按钮时关闭，而不是在单击背景时关闭：

【问题讨论】：

可以尝试修改模态模板为<ion-content (click)="closeModal()"></ion-content><ion-footer>...</ion-footer>
不是模态覆盖屏幕吗？你是怎么点击背景的？
@sebaferreras：这是个好主意，但内容覆盖了背景，我想看看背景。
@suraj：正如您在图片中看到的那样，Modal 仅覆盖屏幕的下部。我希望它在单击其上方的区域时关闭。
当然，继续。对我来说这似乎是一个 hack，但它有效，所以我不在乎；）

标签： angular typescript ionic2 ionic3

【解决方案1】：

就像我们在 cmets 中想的那样，解决这个问题的一种方法是在 modal 中添加一个空的内容，将内容的点击事件绑定到 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;
}

【讨论】：

嗯，在我的设备上测试时，性能很差。需要一两秒钟才能听到点击事件，点击后需要一秒钟才能关闭。有什么想法为什么或要改进什么？
嗯...您是否尝试过将tappable 属性添加到ion-content html 元素？

【解决方案2】：

只有css问题。

请添加到 app.scss

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

这个 sn-p 将显示您的背景（对于小屏幕它是隐藏的）

和

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

设置你的模态不是全宽和全高（默认）并且它应该绝对定位以避免iOS设备上的问题，这将呈现模态框的背景。

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

【讨论】：

在我的例子中，我使用的是屏幕中心的模态并添加了可见性：可见；为我工作。谢谢

【解决方案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 类。

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

【讨论】：