离子2：单击背景

Question

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

主页：

＆＃13;

＆＃13;

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();
  }

}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

模态：

＆＃13;

＆＃13;

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();
  }

}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

就像我们在评论中指出的那样，解决此问题的一种方法是向模态添加空内容，将内容的click事件绑定到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

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

中

inline fun <reified T : Any> any(): T = Mockito.any(T::class.java) ?: T::class.java.newInstance()

别忘了添加“ my-custom-modal” css类。

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

.modal-shadow{
    display: none;
}

Answer 3

只有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设备上出现问题，从而避免出现模态背景。

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