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

Posted 2023-03-13

【中文标题】Ionic 2：单击背景时模态不会关闭

【英文标题】：Ionic 2: Modal doesn't close when clicking on backdrop

【发布时间】：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，但它有效，所以我不在乎；）

【参考方案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();